页面滚动时停留在页面底部的粘滞div。
页面滚动时停留在页面底部的粘滞div。
提问于 2017-08-22 08:16:02
当有人向下滚动我们的页面时，在某个时刻出现一个div (带有cta按钮)进入视图。我想要实现的是，从那一刻起，这个div就会变得“粘稠”，如果站点正在向下滚动，那么这个div就会与视口一起滚动到的底部。这个div基本上是，但不是，有点粘粘的页脚，因为网站的其他部分继续滚动在它后面。
现在，我没有问题，在页面顶部的div粘性，但这不是我想要的。它需要贴在底部。
我使用带词缀的引导程序3。我快到了，但还没到。下面的带有css的javascript几乎完成了这项工作，但是div使用id cta时，只要在viewport中可见div，就会跳下viewport。从那一刻起，它很好地向下滚动，视图位于底部，但是从上到下的跳转需要消失:)
<div id="affixwrapper">
//stuff thats being wrapped above the div with id cta.
</div>
<div id="cta" data-spy="affix">
<div class="section section-success text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<a class="btn ban-default">Button text</a>
</div>
</div>
</div>
</div>
</div>
<script>
$('#cta').affix({
offset: {
top: function() { return $('#affixwrapper').height(); }
}
});
</script>
<style>
.affix {
bottom: 0px;
position: fixed;
width: 100%;
background-color: white;
z-index: 777;
}
</style>回答 1
Stack Overflow用户
发布于 2017-08-24 17:58:58
在CSS中确实有一个名为“粘滞”的位置值，不需要jQuery :)
下面是一个代码片段(请参阅演示)
<!DOCTYPE html>
<style>
body {
height: 600vh;
margin: 0;
}
#sticky {
position: sticky;
top: 90vh;
left: 0px;
width: 100%;
height: 10vh;
background-color: red;
}
#space {
height: 200vh;
}
#container {
height: 200vh;
}
</style>
<div id="space"></div>
<div id="sticky"></div>“粘滞”<div>将在“空格”<div>之后相对定位(即定位为没有position: sticky)，直到用户滚动到top中指定的偏移量，即90vh。在那之后，它将在那个位置切换为position: fixed。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45812361
复制相关文章
相似问题
腾讯云开发者
