在滾動過另一個div後，讓div粘到頁面頂部？

Question

<div id="header"></div> 
<div id="sticky"></div> 
<div id="section"></div> 
<div id="footer"></div> 

<style> 
    body { margin: 0px; background-color: #e3e3e3; } 
    #header { background-color: #cb5454; height: 140px; } 
    #sticky { background-color: #546bcb; height: 70px; } 
    #section { height: 1500px; } 
    #footer { background-color: #cb5454; height: 140px; } 
</style> 

這裏是我的代碼：http://jsfiddle.net/uaqh018d/

我想#sticky堅持到頁面頂部滾動過去的#header後。 我也想隱藏它直到卡住。然後，當滾動回到#header之後，它當然會再次不粘標籤。

我怎樣才能做到這一點？

Answer 1

我會建議增加一個類#sticky當它準備好固定到屏幕的頂部時，然後在想要「取消粘貼」時刪除該類。然後你可以在CSS中操縱那個類。

例如一類fixed你把你的CSS如下：

#sticky { 
    display: none; 
    background-color: #546bcb; 
    height: 70px; 
} 
#sticky.fixed { 
    display: block; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

然後你的jQuery是這樣的：

$(window).scroll(function() { 
    var distanceFromTop = $(this).scrollTop(); 
    if (distanceFromTop >= $('#header').height()) { 
     $('#sticky').addClass('fixed'); 
    } else { 
     $('#sticky').removeClass('fixed'); 
    } 
}); 

這裏有一個更新的FIDDLE

我也可以推薦一些jQuery淡入淡出或幻燈片效果（請參閱小提琴）。

Answer 2

您可以使用position: fixed和JS檢測，當用戶滾動這樣的：

$(document).scroll(function() { 
 
    //detect when user scroll to top and set position to relative else sets position to fixed 
 
    $("#sticky").css({ 
 
    "top": "0", 
 
    "position": $(this).scrollTop() > 140 ? "fixed" : "relative" 
 
    }); 
 
});

body { 
 
    margin: 0px; 
 
    background-color: #e3e3e3; 
 
} 
 
#header { 
 
    background-color: #cb5454; 
 
    height: 140px; 
 
} 
 
#sticky { 
 
    background-color: #546bcb; 
 
    height: 70px; 
 
    width: 100%; 
 
    position: fixed; 
 
} 
 
#section { 
 
    height: 1500px; 
 
} 
 
#footer { 
 
    background-color: #cb5454; 
 
    height: 140px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"></div> 
 
<div id="sticky"></div> 
 
<div id="section"></div> 
 
<div id="footer"></div>

參考

.scroll()