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 -->
        <div class="navbar navbar-default ">
            <div class="container">
                <div class="navbar-header">
                    <div class="logo">
                        <a class="navbar-brand" href="index.html">
                            <img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
                        </a>
                    </div>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      <span class="icon-bar"><span class="inner"></span></span>
                      <span class="icon-bar"><span class="inner"></span></span>
                      <span class="icon-bar"><span class="inner"></span></span>
                    </button>

                </div>

                <div class="collapse navbar-collapse">

                    <ul class="nav navbar-nav navbar-left ">
                        <li><a href="index.html" class="active">Home</a></li>
                        <li><a href="menu.html">Menu</a></li>
                        <li><a href="about.html">About</a></li>
                        <li class="dropdown">
                            <button class="btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
                              Reservation
                            </button>
                            <ul class="dropdown-menu dropdownhover-bottom" role="menu" aria-labelledby="dropdownMenu1">
                                <li><a href="reservationTable.html">Reservation Table</a></li>
                                <li><a href="reservationEvent.html">Reservation Event</a></li>
                            </ul>
                        </li>  
                    </ul>
                    <div class="logo">
                        <a href="index.html">
                            <img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
                        </a>
                    </div>
                    <ul class="nav navbar-nav navbar-right ">
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="tel:(123)234-8765">Order No : (123) 234-8765</a></li>     
                    </ul>

                </div><!-- /collapse -->
            </div><!-- /container -->
        </div><!--/Navbar -->`enter code here`