粘性浮动条：准确定位答案

【问题标题】：Sticky floating bar : accurate position粘性浮动条：准确定位
【发布时间】：2018-06-02 08:29:33
【问题描述】：

我正在寻找一个更好的解决粘条问题的方法。

第 2 和第 3 个框之间的“-----”是显示粘性条的阈值。当它显示出来时，它完全覆盖了第三个框。

在真正的解决方案中，我使用jquery添加了css（margin-top）来将这个元素推到下面；但问题是它在 Firefox 中滞后。用户可以在几分之一秒的时间内看到这个空间。

实现输出（或避免margin-top）的最佳解决方案是什么？

$(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>

【问题讨论】：

标签： javascript jquery html css sticky-footer

【解决方案1】：

更新答案

我认为您需要将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（即它被超出正常文档流）当其包含元素不可见时：

粘性定位元素是其计算位置值为粘性的元素。它被视为相对定位，直到其包含块超过指定阈值，此时它被视为固定。

希望这会有所帮助！

【讨论】：

对不起.. 但似乎我无法提出期望的期望。如果您观察到，当sticky 显示时，它应该推动下面的第三个框并为sticky 腾出一些空间。当前或在我的解决方案中发生的事情，它与第三个框重叠。这不是我想要的。
嗨@Robin，我想我理解得更好。你能试试更新的代码 sn-p 吗？它实际上将sticky div 放回正常流程，并使用hide/show 函数在内部切换display CSS 属性。

【解决方案2】：

这是由于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 */

}

【讨论】：