Верхняя панель навигации (под заголовком) фиксируется поверх экрана при прокрутке

Когда в верхней панели браузера отображается полоса прокрутки:

HTML:

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

Когда панель прокрутки вниз, браузер NOW обычно показывает:

HTML:

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

Но я бы хотел:

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

Я попробовал:

  

CSS:

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

Но это работает только в том случае, если navbar находится в верхнем положении. У меня есть заголовок сверху …

DEMO

Я использовал изображение сверху, а не «HEADER», упомянутое в вашем вопросе.

Это js, который я использовал, чтобы сделать заголовок (navbar в вашем случае) исправленным.

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

Потенциальное решение или class решений называется Affix.

См. Пример boostrap:

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

Общая страtagsя заключается в том, чтобы посмотреть, как близко что-то находится к верхней части windows, и THEN делает свою position: fixed CSS position: fixed как вы пытались сделать.

Это может оказаться более сложным, чем ожидалось, реализовать самостоятельно, когда дело доходит до «стирания» элемента, поскольку вам нужно отслеживать, откуда оно взялось изначально.

Вот пример, взятый из html5rocks, который работает хорошо.

  

Для дальнейшего чтения: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Конечно, .header вот ваш НАВБАР.

Вы скажете #navbar, где он должен быть исправлен. Используйте свойства css сверху, слева, снизу, справа. В вашем случае вам нужно только установить верхний правый лат, равный 0, и фиксированную высоту, например 30px.