Barra de navegación superior (debajo del encabezado) fijada en la parte superior de la pantalla cuando se desplaza

Cuando la barra de desplazamiento está en la parte superior, el navegador muestra:

HTML:

------------------------- | HEADER | ------------------------- | NAVBAR | ------------------------- | body | ------------------------- 

Cuando la barra de desplazamiento está abajo AHORA el navegador normalmente muestra:

HTML:

 ------------------------- | | | body | | | ------------------------- 

Pero me gustaría tener:

 ------------------------- | NAVBAR | ------------------------- | | | body | | | ------------------------- 

Intenté con:

  

CSS:

 #navbar { position:fixed; z-index:1; } 

Pero esto solo funciona si la barra de navegación está en la posición superior. Tengo el encabezado en la parte superior …

MANIFESTACIÓN

He usado una imagen en la parte superior en lugar de la “CABEZA” mencionada en su pregunta.

Este es el js que he usado para hacer el encabezado (barra de navegación en tu caso) corregido.

 var stickyNavTop = $('#header').offset().top; $(window).scroll(function() { if ($(window).scrollTop() > stickyNavTop) { $('#header').addClass('fixed'); } else { $('#header').removeClass('fixed'); } }); 

Una posible solución o clase de soluciones se llama Affix.

Vea el ejemplo de Boostrap aquí:

http://getbootstrap.com/javascript/#affix

La estrategia general es ver qué tan cerca está algo en la parte superior de la ventana y, a continuación, hacer su position: fixed CSS position: fixed como lo intentaste hacer.

Esto puede ser más complicado de lo esperado para implementarlo solo cuando se trata de ‘despegar’ el elemento, ya que necesita rastrear de dónde vino originalmente.

Aquí hay un ejemplo tomado de html5rocks que funciona bien.

  

Para más información: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Por supuesto, .header aquí es tu NAVBAR.

Le dirá a #navbar dónde debería ser reparado. Utilice las propiedades CSS arriba, izquierda, abajo, derecha. En su caso, solo necesita la parte superior superior izquierda configurada en 0 y una altura fija, por ejemplo 30px.