>source

사용자가 페이지를 아래로 스크롤 할 때 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>


  • 답변 # 1

    이를 수행하기 위해 자바 스크립트 또는 jquery가 필요하지 않습니다.

    고정 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>
    
    

  • 답변 # 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

  • 답변 # 3

    Chrome에서 시도했습니다. 사용자가 맨 위로 스크롤 할 때 항상 Nav bar 아래에 있도록 최고 값을 Nav 막대 높이로 제공하십시오.

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

관련 자료

  • 이전 nodejs에서 경고 메시지를 표시하는 방법
  • 다음 python - 중첩 된 객체를 사전으로 변환하는 방법?