在滚动过另一个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()