我正在寻找更好的粘杆问题解决方案。
第2和第3个框之间的'-----'是粘性条应显示的阈值。显示时，它完全重叠第3个框。
在真正的解决方案中，我使用jquery添加了css（margin-top）来推送下面的元素;但问题是它在Firefox中落后了。人们可以在UI上看到这个空间几秒钟。
实现输出的最佳解决方案是什么（或避免利润率最高）？
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
position: sticky;
top: 20px;
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='sticky'>
</div>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>更新的答案
我认为你需要保持你的sticky div正常流量，而position: sticky可能不是这里的正确选择。这是一个例子：
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 100px;
border: 1px dotted green;
margin: 20px 0;
top: 40px;
display: none;
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='sticky'>
</div>
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>关于CSS流程的一个很好的文档：http://marksheet.io/css-the-flow.html
position: sticky在那里没有详细说明，但是从this document，你会看到一个sticky元素在它可见时相对于它的包含元素定位，并且当它包含元素时变成fixed（也就是说，它从正常文档流中取出）不可见：
粘性定位元素是其计算的位置值是粘性的元素。它被视为相对定位，直到其包含块超过指定的阈值，此时它被视为固定的。
希望这可以帮助！
这是由于position: sticky。使用position: fixed可以帮助你。
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
top: 20px;
background: green;
position: fixed;
width: calc(100% - 40px); /* subtract the 20px taken by the left and right margins */
}