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 <div>'s placement to appear at the bottom of the page initially
• Add a large margin-top or bottom to the <div> to push it down

Consider the following modified code:

Refined HTML

<div>

Modified CSS

.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>

CSS Code

/* 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");
     }
 });
The above is the detailed content of How to Create a Scrolling Navigation Bar That Sticks to the Top?. For more information, please follow other related articles on the PHP Chinese website!