固定顶部导航栏的变体

【问题标题】：A variation of the fixed top navbar固定顶部导航栏的变体
【发布时间】：2014-05-26 06:52:11
【问题描述】：

如何在页面加载时创建一个导航栏，例如，距顶部 50 像素？当我向下滚动时，它不会移动，但是当我越过它时，它的行为类似于 Bootstrap 中的固定顶部导航栏。如果你使用 Bootstrap 会很有帮助。

提前感谢您的回答。

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案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

【讨论】：

【解决方案2】：

这是一个 jquery 脚本，可与 bootstrap 一起使用，并在 50px 滚动时交换 navbar-fixed-top。

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

【讨论】：