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>

Answer 2

尝试一下：它不使用jquery或javascript。

.content-section {
  min-height: 2000px;
}
.sidebar-section {
  position: absolute;
  height: 100%;
  width: 100%;
}


.sidebar-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	/* Position the items */
	// &:nth-child(2) { top: 25%; }
	// &:nth-child(3) { top: 50%; }
	// &:nth-child(4) { top: 75%; }
}


.make-me-sticky {
  position: -webkit-sticky;
	position: sticky;
	top: 0;
    
  padding: 0 15px;
}



/* Ignore This, just coloring */
body {
  background: #fff;
}

article {
  background: white;
  border-radius: 12px;
  padding: 25px 0 600px;
}


.title-section, .content-section, .sidebar-section {
  background: #fff;
  // border-radius: 12px;
  // border: solid 10px #f1f1f1; 
}

.title-section {
  text-align: center;
  padding: 50px 15px;
  margin-bottom: 30px;
}

.content-section h2 {
  text-align: center;
  margin: 0;
  padding-top: 200px;
}

.sidebar-item {
  text-align: center;
  
  h3 {
    background: gold;
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0 100px; 
    border-bottom: solid 1px #fff;
  }
}

<article>
   <div class="container-fluid">
   <div class="row">
   <div class="col">
   <div class="title-section">
        <h1>Your Navigation Bar</h1>
   </div>
   </div>
   </div>
   
   <div class="row">
   <div class="col-7">

   <div class="content-section">
        <h2>Your Body Content Section</h2>
   </div>
   </div>
   <div class="col-5">

   <div class="sidebar-item">
   <div class="make-me-sticky">
        <h3>Your Sidebar</h3>
   </div>
   </div>
          

   </div>
   </div>
   </div>
</article>

source:codepen

Answer 3

我在Chrome浏览器中尝试过此操作。提供最高值作为导航栏高度，以便当用户向上滚动到顶部时，它将始终位于导航栏下方。

position: sticky;
top: 100px;---Replace 100 with your Nav bar height
z-index: 99;

滚动上方的粘性元素

3 个答案: