상단에 고정되는 스크롤 탐색 표시줄을 만드는 방법은 무엇입니까?

상단에 고정되는 스크롤 내비게이션 바 만들기

고정 내비게이션 바

처음에 나타나는 내비게이션 바를 만드는 것을 목표로 합니다. 페이지 하단. 아래로 스크롤하면 막대가 페이지 상단에 도달하고 그대로 유지될 때까지 이동합니다. 이는 각각 navbar-fixed-bottom 및 navbar-fixed-top 클래스를 사용하여 달성됩니다.

코드 문제 해결

제공된 코드를 검사하면 다음이 드러납니다.

• 올바른 navbar-fixed-top 클래스 사용법
• 적절한 그림자 제거

그러나 막대가 원하는 대로 작동하도록 하려면 다음이 필요합니다.

• 처음에 페이지 하단에 나타나도록
  의 위치를 ​​조정합니다.
• 에 큰 여백 상단 또는 하단을 추가하여 밀어보세요. down

  다음 수정된 코드를 고려하세요.

  세련된 HTML

  <div>
  <h3 id="수정된-CSS">수정된 CSS</h3>
  <pre class="brush:php;toolbar:false">.navbar-fixed-top {
      top: 0;
      z-index: 100;
      position: fixed;
      width: 100%;
      margin-top: 800px; /* Add a sufficient margin-top to adjust the navigation bar's initial position */
  }

  대체 솔루션

  Bootstrap의 내장 탐색 모음 동작이 원하는 대로 되지 않으면 더 간단한 jQuery 또는 JavaScript 구현으로 전환할 수 있습니다:

  HTML 코드

     <div>
  <h3 id="CSS-코드">CSS 코드</h3>
  <pre class="brush:php;toolbar:false">/* Initially, the nav bar is absolute, positioned at the bottom */
  #nav_bar {
      position: absolute;
      bottom: 0;
  }
  
  /* When the #content is scrolled 40px, the navbar changes to fixed */
  #content {
      height: 3000px;  /* Increase this to match your page content length */
      scroll: auto;
  }
  
  @media screen and (max-width: 480px) {
      #content {
          height: 8000px;
      }
  }
  
  /* This makes the navbar fixed positioned at the top, until the content is fully scrolled */
  .fixed-nav {
      position: fixed !important;
      top: 0;
      left: 0;
      width: 100%;
  }

  JavaScript 코드

  $(window).scroll(function(){
      if ($(window).scrollTop() > 40) {
          $("#nav_bar").addClass("fixed-nav");
       } else {
           $("#nav_bar").removeClass("fixed-nav");
       }
   });