Question

当有人向下滚动页面时，某个时刻会出现一个div（带有cta按钮）。我想要实现的是，从那一刻开始，这个div变得“粘”。如果网站向下滚动，则向下滚动视口，位于视口底部。这个div然后基本上是，但不是真的，有点粘性页脚，因为网站的其余部分继续滚动它。

现在，我在页面顶部获得div粘性没有问题，但那不是我想要的。它需要坚持在底部。

我使用带有词缀的bootstrap 3。我几乎就在那里，但还没有。以下带有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>

Answer 1

实际上有一个名为＆＃39; sticky＆＃39;的位置值。在CSS中，不需要jQuery：）

这是一段代码段（请参阅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>

＆＃34;粘＆＃34;在{＆＃34;空间＆＃34;}之后，<div>将相对定位（即定位为没有position: sticky）。 <div>直到用户滚动时，它达到top中指定的偏移量，即90vh。之后，它将在该位置切换为position: fixed。

滚动页面时粘滞的div留在页面底部

1 个答案: