Sticky div that stays at bottom of the page when p

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.

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>

标签： jquery twitter-bootstrap viewport sticky affix

1条回答

Deceive 欺骗

2楼-- · 2019-07-19 16:16

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>

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.

0人赞添加讨论(0) 举报

Sticky div that stays at bottom of the page when p

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间