Sticky div that stays at bottom of the page when page is being scrolled
When someone scrolls down our page, at a certain moment a div (with a cta button in it) 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. When the user scrolls back up to the point of when he or she reaches the 'original' div, the 'sticky' div disappears and the original div is visible. And so on.
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.
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>