让 Bootstrap 导航栏在滚动时折叠？答案

【问题标题】：Make Bootstrap navbar collapse on scroll?让 Bootstrap 导航栏在滚动时折叠？
【发布时间】：2015-03-02 16:42:04
【问题描述】：

一旦我在常规桌面版本上滚动过去，我正试图让我的 Bootstrap 导航栏在其非折叠状态和移动/折叠状态之间切换。

我曾尝试使用 jQuery，但这迫使我编写 css 更改，一旦 scrollTop > 像素数，就会在 jQuery 中逐行导致崩溃。

即使我执行了上述操作，不幸的是，即使移动导航栏会出现，菜单选项也会一直存在，并且不会在单击汉堡包时关闭。

我不禁认为肯定有更简单的方法可以做到这一点，但我对 Bootstrap 很陌生。

提前致谢。

编辑，这是我尝试过的代码：

这个 CSS 是导致导航栏在我想要的高级点切换到移动版本的原因：

@media (max-width: 1150px){
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }

    .navbar-static-top { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        margin: 0; 
    }

这是我用来在滚动超过 50 像素后尝试将该 css 应用到桌面标题的快速代码：

$(document).ready(function(){
    var $document = $(document);

    $document.scroll(function() {
      if ($document.scrollTop() >= 50) {
        /*$('.navbar-header').css('float', 'none');
        $('.navbar-toggle').css('display', 'block');
        $('.navbar-collapse').css('border-top', '1px solid transparent');
        $('.navbar-collapse').css('box-shadow', 'inset 0 1px 0 rgba(255,255,255,0.1)');
        $('.navbar-collapse.collapse').css('display', 'none !important');
        $('.navbar-nav').css('float', 'none !important');
        $('.navbar-nav').css('margin', '7.5px -15px');
        $('.navbar-nav>li').css('float', 'none');
        $('.navbar-nav>li>a').css('padding-top', '10px');
        $('.navbar-nav>li>a').css('padding-bottom', '10px');
        $('.navbar-text').css('float', 'none');
        $('.navbar-text').css('margin', '15px 0');
        $('.navbar-collapse.collapse.in').css('display', 'block !important');
        $('.collapsing').css('overflow', 'hidden!important');
        $('.navbar-static-top').css('position', 'fixed');
        $('.navbar-static-top').css('top', '0');
        $('.navbar-static-top').css('left', '0');
        $('.navbar-static-top').css('width', '100%');
        $('.navbar-static-top').css('margin', '0');*/
                  } else {
      }

    });

});

【问题讨论】：

你能展示你试过的代码吗？
现在在代码中编辑。
好吧，你要做的最后一件事就是用 jQuery 编写所有的 CSS，这不是它的用途（所以我什至不会介绍如何用更少的行来做到这一点）。编写 CSS 以便当导航栏有另一个类名时，即<div class="navbar navbar-collapsed" id="navbar">，它会折叠并使用$('#navbar').addClass('navbar-collapsed') 和$('#navbar').removeClass('navbar-collapsed')
如果你发现自己需要在 jQuery 中编写一些 CSS，最好一次性完成，例如$('.navbar-static-top').css({'position': 'fixed', 'top': '0'}); 等（但 @Popnoodles 是正确的：不要在 jQuery 中编写所有 CSS。）
对。我现在让导航栏在滚动点之后粘在页面顶部，但仍在努力让它切换到移动版本。有什么想法吗？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我也在努力让汉堡按钮在滚动时显示。看起来您已经很接近了，但您可以更轻松地执行以下操作。

在你的 main.js 中（在公共范围内），在滚动上添加一个类：

$(".navbar").on('affixed.bs.affix', function(){
        $('.navbar').addClass('navbar-collapsed');
    });

当导航回到顶部时删除类：

$(".navbar").on('affixed-top.bs.affix', function(){
        $('.navbar').removeClass('navbar-collapsed');
    });

然后为该课程添加您的 sass：

.navbar-collapsed{
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in { 
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

.navbar-static-top { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    margin: 0; 
}
}

【讨论】：