La barra de navegación permanecerá fija tan pronto como llegue a la parte superior de la página

En mi código hay un banner en la parte superior de la página y una barra de navegación justo debajo de él. Lo que quiero hacer es cuando me desplazo hacia abajo, la pancarta y la barra de navegación se mueven como deberían, pero tan pronto como la barra de navegación llega a la parte superior de la página, permanece allí incluso cuando continúo desplazándome. alguna idea sobre cómo puedo hacer esto?

(Nota: por el momento solo sé HTML / CSS, aún no sé el idioma pero si Javascript es la única solución, intentaré entender).

HTML:

   

CSS:

  #header { background-image: url("http://sofes.miximages.com/html/header final1.jpg"); background-size: 100% 100%; width: 1075px; height: 200px; margin: 0 auto; position: relative; } #top_menu { display:block; position: fixed; top: 210px; left: 136px; border-radius: 4px; border-width: 1px 1px 1px; border-style:solid; background-color: white; font-family: 'Lato', sans-serif; font-size: 14.85px; height: 40px; width: 1075px; margin: 0 auto; border-color: #A4A4A4; }  

Jolan, la mayoría de tu código es correcto, pero necesitas un poco de Javascript en tu código para que la barra de navegación se deslice hacia arriba mientras te desplazas. Espero que esto ayude.

 var header = document.querySelector("#header"); new Headroom(header, { tolerance: { down : 2, up : 5 }, offset : 100, classes: { initial: "slide", pinned: "slide--reset", unpinned: "slide--up" } }).init(); 

Para esto necesitas algo de javascript. Hay una muestra que está relacionada con tu problema. Comprueba este violín .

JQuery

 $(window).scroll(function () { if ($(window).scrollTop() > 100) { $('#scroller').css('top', $(window).scrollTop()); } } ); 

100 en este código la distancia de la barra de navegación desde la parte superior. Puede variar según sus requisitos.

También puede consultar este enlace JQuery Posición: ‘NAVBAR’ fijo al desplazarse por la página

Mi solución no requiere jQuery, así que disfruta:

 function scrollTop() { return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop } var navbar = document.getElementById('navbar') var sticky_point = 100 window.onscroll = function() { if (scrollTop() >= sticky_point) { navbar.style.position = 'fixed' } else if (scrollTop() < sticky_point) { navbar.style.position = 'static' } } 
 body { margin: 0; } header { width: 100%; height: 100px; background: #2c3e50; } nav { width: 100%; height: 30px; background: #34495e; top: 0; } 
 
HEADER
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.