固定顶部导航栏的变体

Question

How do I make a nav bar that on page loading is present at, say, 50px from the top? As I scroll down, it doesn't move but when I cross it, it behaves similar to a fixed-top nav bar in Bootstrap. It would be really helpful if you used Bootstrap.

Thanks in advance for your answers.

Answer 1

Use this simple jquery script:

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>50){
        $('#navbar').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.5'});
    } else {
         $('#navbar').css({ 'position': 'absolute', 'top': '50px', 'opacity': '1'});
    }
});

and here is the JSFiddle example

Answer 2

Here is a jquery script built to work with bootstrap, and that swaps in navbar-fixed-top at 50px scroll.

Example Bootply

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>50){        
        $(".navbar-default").addClass("navbar-fixed-top");
    } else {
        $(".navbar-default").removeClass("navbar-fixed-top");
    }
});