当有人向下滚动我们的页面时，在某个时刻，会出现一个 div（带有 cta 按钮）。我想要实现的是，从那一刻起，这个 div 变得“粘性”并随着视口向下滚动，在视口的底部，如果网站正在向下滚动。这个 div 基本上是（但不是真正的）一种粘性页脚，因为网站的其余部分不断在其后面滚动。
现在，我可以毫无问题地将 div 粘在页面顶部，但这不是我想要的。它需要粘在底部。
我使用 bootstrap 3 和 affix。
我已经快到了，但还没有完全实现。
下面带有 css 的 javascript 几乎可以完成这项工作，但是当 div 在视口内可见时，带有 id cta 的 div 就会向下跳到视口。从那一刻起，它可以很好地向下滚动，视口位于底部，但从上到下的跳转需要消失:)
<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>
CSS 中有一个名为“粘性”的位置值，不需要 jQuery :)
这是一个代码片段（参见demo http://bokand.github.io/sticky2.html)
<!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>将相对定位（即定位为没有position: sticky) 就在“空格”之后<div>直到用户滚动时到达指定的偏移量top， 那是90vh。之后，它会变成position: fixed在那个位置。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
