Barra de navegação fixa em rolagem

Não consigo criar uma barra de navegação fixa na rolagem. Analisei algumas das respostas postadas aqui, mas não consigo fazer com que funcione para a minha solução. O problema que estou enfrentando é que a barra de navegação não rola após o header. Ele fica em uma posição fixa abaixo do header e não se move, apesar da rolagem para baixo. Alguma ideia?

//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; } } 
   

Scrolling Nav

Usage Instructions: Make sure to include the scrolling-nav.js, jquery.easing.min.js, and scrolling-nav.css files. To make a link smooth scroll to another section on the page, give the link the .page-scroll class and set the link target to a corresponding ID on the page.

Click Me to Scroll Down!

About Section

Services Section

Contact Section


Captura de canvas 1 Captura de tela 1


Captura de canvas 2 Captura de tela 2