Fixed position menu and floating block?

HTML & CSS
1

Hi all,

I’m looking to implement both the fixed menu on http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/nagging-menu-with-css3-and-jquery/index.html and the scrolling box on http://www.ebuyer.com/283002-extra-value-desktop-pc-7873-1047 on the same page - can you guys point me in the right direction (article or tut)?

I’ve had a quick browse and can’t really find what I’m looking for.

Many thanks :hohoho:

2

The most obvious problem with running the two scripts together is that both apply the class “fixed” to the elements that are pinned in position. To prevent this, you could change the class in one script:

nagging-menu.js changed from ‘fixed’ to ‘fixed-side’

$(function(){
    
    var menu = $('#menu'),
        pos = menu.offset();
        
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed-side').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed-side')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed-side').addClass('default').fadeIn('fast');
                });
            }
        });

});

and the .fixed selector in style.css to .fixed-side

.fixed-side {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
    
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}

Apart from this, it would be necessary to see a working example to take it any further.

3

Thanks for your reply, I will get onto this asap