滾動瀏覽時導航欄未切換為固定

Question

供參考的網址是http://buildme.co/

我目前在瀏覽主導航欄時無法切換到固定導航欄。 這是傾斜圖像下的導航欄。

以下JavaScript代碼應該可以做到這一點

// Change To Fixed Header
$(document).ready(function(){
    $(window).bind('scroll', function() {
        var navHeight = $( window ).height() - 100;
        if ($(window).scrollTop() > navHeight) {
            $('.main-navbar').addClass('navbar-fixed-top');
        }
        else {
            $('.main-navbar').removeClass('navbar-fixed-top');
        }
    });
});

但是事實並非如此，什么也沒有發生。

這是我要實現的示例。 http://stanislav.it/tutorials/sticky-navigation/

Answer 1

看來您可能需要將滾動事件綁定到您的案例中的“ body”（當我在您的網站上對其進行檢查時，窗口滾動事件並未觸發，但body已激活）

編輯：哦，我想我看到了...這是您添加到html，body的溢出樣式：

html, body {
    overflow-x: hidden;
    height: 100%;
}

如果我擺脫了overflow-x：隱藏的代碼對我有用。 我知道我以前遇到過麻煩，因為它不允許一個軸允許溢出，而另一個不允許（所以如果您將overflow-x設置為：隱藏，則它可能會對y滾動產生有趣的作用）