滚动页面时停留在页面底部的粘性div [英] Sticky div that stays at bottom of the page when page is being scrolled
问题描述
当有人向下滚动我们的页面时，在某个时刻会显示一个div（带有cta按钮）。我要实现的目标是，从此刻起，该div就变得发粘并随着视口滚动向下，如果站点正在向下滚动，则该视口会在视口底部。然后，这个div基本上是（但不是真的）某种粘性的页脚，因为该网站的其余部分一直在它后面滚动。
When someone scrolls down our page, at a certain moment a div (with a cta button) comes into view. What i am trying to achieve is that this div, from that moment on, gets 'sticky' and scrolls down with the viewport, at the bottom of the viewport, if the site is beging scrolled down. This div then basically is, but not really, sort of a sticky footer as the rest of the site keeps on scrolling behind it.
现在，我没有问题了将div粘在页面顶部，但这不是我想要的。它需要固定在底部。
Now, i am having no problem in getting the div sticky at the top of the page, but thats not what i am after. It needs to stick at the bottom.
我使用带后缀的bootstrap 3。
我快到了，但还没到。
以下带有css的javascript几乎可以完成这项工作，但是ID为cta的div一旦在视口中可见div，就会跳下视口。从那一刻起，它便以底部的视口很好地向下滚动，但是从上到下的跳跃需要消失：）
I use bootstrap 3 with affix. I'm almost there, but not quite yet. The following javascript with css almost does the job, but the div, with id cta, jumps down the viewport as soon as the div is visible inside the viewport. From that moment on it scrolls down nicely with the viewport at the bottom, but the jump from top to bottom needs to disappear :)
<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：）
There is literally a position value called 'sticky' in CSS, no need for jQuery :)
这是一个代码段（请参见演示）
Here's a code snippet (see demo)
<!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> 将在空格 ÷ 位置：粘性的位置） c>直到用户滚动时，它达到 top 中指定的偏移量，即 90vh 。之后，它将切换到该位置的位置：固定。
The "sticky" <div> will be relatively positioned (i.e. positioned as it would be without position: sticky) right after the "space" <div> until, as the user scrolls, it reaches the offset specified in top, that is 90vh. After that, it'll switch to be position: fixed at that location.
这篇关于滚动页面时停留在页面底部的粘性div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
