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 that the nav bar does not scroll after the header. It stays in a fixed position below the header and does not move despite scrolling down. Any ideas?
//jQuery to collapse the navbar on scroll $(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".navbar").addClass("top-nav-collapse"); } else { $(".navbar").removeClass("top-nav-collapse"); } }); //jQuery for page scrolling feature - requires jQuery Easing plugin $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); });body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } @media(min-width:767px) { .navbar { position: relative padding: 20px 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; background-color: azure } .top-nav-collapse { padding: 0; } }<body id="home" data-spy="scroll" data-target=".navbar-default"> <!-- Header --> <header id="top" class="header-Home"> <div class="text-vertical-center"> <!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> --> <div class="row"> <div class="col-sm-4 col-sm-push-4"> <h4><a href="#About">About</a></h4> <h4><a href="#Services">Services</a></h4> <h4><a href="#Contact">Contact</a></h4> </div> </div> </div> </header> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#home">A&Co</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse"> <ul class="nav navbar-nav"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden"> <a class="page-scroll" href="#home"></a> </li> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#services">Services</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Intro Section --> <section id="intro" class="intro-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Scrolling Nav</h1> <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p> <a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>About Section</h1> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Services Section</h1> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Contact Section</h1> </div> </div> </div> </section> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Scrolling Nav JavaScript --> <script src="js/jquery.easing.min.js"></script> <script src="js/scrolling-nav.js"></script> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> </body> </html>Screenshot 1 
Screenshot 2 