滾動時讓Bootstrap導航欄崩潰？

Question

我試圖讓我的Bootstrap導航欄在非折疊狀態和移動/折疊狀態之間切換，一旦我在常規桌面版本上滾動它。

我試圖利用jQuery然而這迫使我編寫css更改，這些更改會導致jQuery中的一行逐行scrollTop>像素數。

即使我做了上述操作，不幸的是即使移動導航欄出現，菜單選項也會一直存在，並且在點擊漢堡包時不會關閉。

我不禁想到必須有一個更簡單的方法來做到這一點，但我對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 px后嘗試將該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 {
      }

    });

});

Answer 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; 
}
}