javascript - 粘性元素滚动到顶部

Question

我试图让我的 div 在用户向下滚动页面时出现在顶部，一旦用户滚动到顶部，该元素不应与导航栏重叠。

我正在努力实现这一点，因此将不胜感激。这是我尝试过的:

 <div id="floating-sidebar-sticky-wrapper" class="floating-sidebar-wrap" style="height: 696px;">
 <div id="floating-sidebar"></div>
</div>


 <script>
    $(window).on('load',function(){
      $("#floating-sidebar").sticky({ topSpacing: 0, wrapperClassName: "floating-sidebar-wrap" });
    });
  </script>

Answer 1

你不需要任何 javascript 甚至 jquery 来做到这一点。

试试 Sticky CSS 位置

.top-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background:black;
  color: white;
  line-height: 2em;
}
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 2em;
  background-color: #ccc;
  padding: 5px;
  font-size: 20px;
}

<div class="top-nav">Top nav</div>
<div class="">
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how  sticky positioning works.</p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>

<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
<div class="sticky" style="background:red">I will stick to the screen when you reach my scroll position</div>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p>
</div>