Question

如何在页面加载时创建一个导航栏，例如，从顶部开始50px？当我向下滚动时，它不会移动但是当我穿过它时，它的行为类似于Bootstrap中的固定顶部导航栏。如果您使用Bootstrap，那将非常有用。

提前感谢您的回答。

Answer 1

使用这个简单的jquery脚本：

$(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'});
    }
});

这是JSFiddle example

Answer 2

这是一个jquery脚本，用于处理bootstrap，并在navp-fixed-top以50px滚动交换。

<强> 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");
    }
});

固定顶部导航栏的变体

2 个答案: