Question

i am trying to have the tipical menu following the webpage scroll,

i wanted to change the position relating the marginTop with the page scroll,

$(document).ready(function(){

    $(window).scroll(function(){
        var v= $(document).scrollTop();
        console.log(v);
        if(v>50){
            $('.menu').css({'marinTop':v+'px'});
            console.log(true);
        }else{
            $('.menu').css('marginTop','50px');                        
            console.log(false);
        }
    });
});

but it just wont move the bar… :s

Answer 1

Here:

$(document).ready(function(){
    $(window).scroll(function(){
        var value = $(window).scrollTop();
        if(value>+$('.menu').css('marginTop').replace(/px$/, "")) {
            $('.menu').css({'position':'fixed','top': 0});
        }else{
            $('.menu').css('position','static');                        
        }
    });
});

Fixed 2 things:

• Removed the ".px" (css("marginTop") returns "50px", which can not be compared to a number)
• You should really use “position: fixed” instead of a javascript-updated “position: absolute“