How to Create a Scrolling Navigation Bar That Sticks to the Top?

Making a Scrolling Navigation Bar That Sticks to the Top

Sticky Navigation Bar

You're aiming to create a navigation bar that initially appears at the bottom of the page. As you scroll down, the bar moves along until it reaches the top of the page and remains there. This is achieved using the navbar-fixed-bottom and navbar-fixed-top classes, respectively.

Resolving your Code Issue

Examining your provided code reveals the following:

• Correct navbar-fixed-top class usage
• Appropriate shadow removal

However, to make the bar behave as desired, you need:

• Adjust the
  's placement to appear at the bottom of the page initially
• Add a large margin-top or bottom to the
  to push it down

  Consider the following modified code:

  Refined HTML

  <div>
  <h3 id="Modified-CSS">Modified 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 */
  }

  Alternative Solution

  If Bootstrap's built-in navigation bar behavior isn't as desired, you can switch to a simpler jQuery or JavaScript implementation:

  HTML Code

     <div>
  <h3 id="CSS-Code">CSS Code</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 Code

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