Skip to content Skip to sidebar Skip to footer

Fixed Navigation Bar On Scroll

I can't seem to create a fixed Navigation bar on scroll. I've looked at some of the answers posted on here however I can't get it to work for my solution. THe problem I'm facing is

Solution 1:

To keep the navigation bar in the same place as you scroll it's

position: fixed;

In the CSS for the nav that worked for me, but that not might be what you are after...

Solution 2:

$(window).scroll(function(){
        if($("body").scrollTop() > 100 || $("html").scrollTop() > 100) {
        $(".navbar").addClass(".stop");
        } else {
            $(".navbar").removeClass(".stop");
        }
    });
    enter code here

// css
.stop{
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;

}


// html markup 
    <!-- Begin Navbar --><divclass="navbar navbar-default "><divclass="container"><divclass="navbar-header"><divclass="logo"><aclass="navbar-brand"href="index.html"><imgsrc="images/Restaurant-logo.png"class="img-responsive"alt="Restaurant logo"></a></div><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="icon-bar"><spanclass="inner"></span></span><spanclass="icon-bar"><spanclass="inner"></span></span><spanclass="icon-bar"><spanclass="inner"></span></span></button></div><divclass="collapse navbar-collapse"><ulclass="nav navbar-nav navbar-left "><li><ahref="index.html"class="active">Home</a></li><li><ahref="menu.html">Menu</a></li><li><ahref="about.html">About</a></li><liclass="dropdown"><buttonclass="btn-default dropdown-toggle"type="button"data-toggle="dropdown"data-hover="dropdown"aria-expanded="false">
                              Reservation
                            </button><ulclass="dropdown-menu dropdownhover-bottom"role="menu"aria-labelledby="dropdownMenu1"><li><ahref="reservationTable.html">Reservation Table</a></li><li><ahref="reservationEvent.html">Reservation Event</a></li></ul></li></ul><divclass="logo"><ahref="index.html"><imgsrc="images/Restaurant-logo.png"class="img-responsive"alt="Restaurant logo"></a></div><ulclass="nav navbar-nav navbar-right "><li><ahref="blog.html">Blog</a></li><li><ahref="contact.html">Contact</a></li><li><ahref="tel:(123)234-8765">Order No : (123) 234-8765</a></li></ul></div><!-- /collapse --></div><!-- /container --></div><!--/Navbar -->`enter code here`

Post a Comment for "Fixed Navigation Bar On Scroll"