固定的菜單底部直到某個點，然後頂部的頁面其餘部分

我有一個菜單，它保持相對的狀態，直到窗口的頂部滾動到它，然後它從那裏無縫地變爲固定的，但在較小的屏幕上的人可以'因此我需要一種方法將其固定在底部，直到它到達目前位於主圖像下方的位置（距窗口頂部680像素），然後變爲相對直到屏幕頂部碰到它再次（即已滾動680像素），並繼續固定在頁面的其餘部分的頂部，我目前使用的代碼是;固定的菜單底部直到某個點，然後頂部的頁面其餘部分

$(window).load(function(){ 

$(window).scroll(function(e) { 

if ($(window).scrollTop() > 680) { 

    $('.nav').css({ 

      position: 'fixed', 

      top: '0' 

     }) 

     $('body').css({ 

      margin: '105px 0px 0px 0px' 

     }); 

    } else { 

     $('.nav').css({ 

      position: 'relative' 

     }) 

     $('body').css({ 

      margin: '0px 0px 0px 0px' 

     }); 

    } 

}); 
});

來源

2014-10-01 user2679140

請提供一個jsfiddle，使它更容易可視化您的問題。 – 2014-10-01 09:02:23

我已經在這裏設置了它，但代碼似乎不起作用http://jsfiddle.net/n4xvuk8j/1/，但你可以看到如何在小屏幕上看不到黑條，所以我希望它固定直到它到達它在頂箱底部的位置，然後保持相對直到窗口的頂部到達，然後它將保持固定在頂部。 – user2679140 2014-10-01 09:21:48

想到兩件事：首先，'jQuery（document）.ready'已經足夠了，你需要刪除'$（window）.load'。其次，邏輯切換，它需要'$（window）.scrollTop（）<680'。 – 2014-10-01 09:28:37

好吧，這裏是你的解決方案：

$(window).scroll(function(e) { 
    var scrollTop = $(window).scrollTop(); 

    $('body') 
     .toggleClass('top', scrollTop > 1400) 
     .toggleClass('visible', scrollTop <= 1400 && scrollTop > 1505 - $(window).height()); 
});

.nav { 
    width:100%; 
    height:105px; 
    background:#333; 
    bottom: 0; 
    position: fixed; 
} 

.visible .nav { 
    position: static; 
} 

.top .nav { 
    bottom: auto; 
    top: 0; 
} 

body.top { 
    margin-top: 105px; 
}

導航固定每默認底部。它一旦通過1400像素就會到達頂部。當我們高於1400像素但低於1400像素加上導航高度（1505）減去窗口高度時，我們讓導航滾動。這裏有一個工作小提琴：http://jsfiddle.net/n4xvuk8j/4/

來源

2014-10-01 13:52:37

非常感謝，非常感謝！ – user2679140 2014-10-01 17:52:11

固定的菜單底部直到某個點，然後頂部的頁面其餘部分

回答

相關問題