滚动页面时粘滞的div留在页面底部

当有人向下滚动页面时，某个时刻会出现一个div（带有cta按钮）。 我想要实现的是，从那个时刻开始，这个div变得“粘滞”并在视口的底部向下滚动，如果网站向下滚动的话。 这个div基本上是，但不是真的，有点粘性页脚，因为网站的其余部分继续在它后面滚动。

现在，我在页面顶部获得div粘性没有问题，但那不是我所追求的。 它需要坚持在底部。

我使用带有词缀的bootstrap 3。 我快到了，但还没到。 以下带有css的javascript几乎完成了这项工作，但是只要div在视口内可见，带有id cta的div就会跳过视口。 从那一刻开始，它会在底部的视口中向下滚动，但从上到下的跳跃需要消失:)

 //stuff thats being wrapped above the div with id cta. 
 
 
 
 
 
 Button text 
 
 
 
 
  $('#cta').affix({ offset: { top: function() { return $('#affixwrapper').height(); } } });   .affix { bottom: 0px; position: fixed; width: 100%; background-color: white; z-index: 777; }  

Answer 1

在CSS中确实有一个名为’sticky’的位置值，不需要jQuery 🙂

这是一段代码片段（见演示 ）

“sticky”

将在“space”

之后相对定位（即定位为没有position: sticky ），直到用户滚动时，它达到top指定的偏移量，即90vh 。 之后，它将切换到position: fixed在该位置。