Сохранение статических Header За все остальные элементы

Question

У меня есть заголовок в моем файле индекса определяется следующим образом:

<header id="header"> 
    <div id="menu-trigger" class="header-button left icon-menu" ></div> 
    <h1><a class='current' href="index.html#home">Title</a></h1> 
</header> 

мне удалось получить это статический всегда наверху при прокрутке с:

$(function() { 
    console.log('Stick bar at top. . . '); 
    // Stick the #nav to the top of the window 
    var nav = $('#header'); 
    var navHomeY = nav.offset().top; 
    var isFixed = false; 
    var $w = $(window); 
    $w.scroll(function() { 
     var scrollTop = $w.scrollTop(); 
     var shouldBeFixed = scrollTop > navHomeY; 
     if (shouldBeFixed && !isFixed) { 
      nav.css({ 
       position: 'fixed', 
       top: 0, 
       left: nav.offset().left, 
       width: nav.width(), 
       //z-index: 1; 
      }); 
      isFixed = true; 
     } 
     else if (!shouldBeFixed && isFixed) 
     { 
      nav.css({ 
       position: 'static' 
      }); 
      isFixed = false; 
     } 
    }); 
}); 

Проблема в том, что любые просмотры, которые я загружаю в файл index.html, появляются над заголовком. Мне нужен заголовок для всех остальных элементов.

Есть ли способ сделать это? Или я должен перезагружать заголовок после перезагрузки всех просмотров?

Спасибо,

Филип

Answer 1

The CSS Свойс Z-индекс: 1000 должны сделать это.

Вы можете сделать это через класс, а также через javascript/JQuery.

Answer 2

Я бы попытался использовать отдельный файл css вместо применения модификаторов CSS с помощью jQuery.

Модификатор css и с высоким значением значения z-index показывают автоматически, что вы делаете в обработчике прокрутки.

Кстати, вы никогда не должны устанавливать заголовок на static, z-index не работает со статическими полями. Если вам нужно место наверху, используйте padding-top или margin-top в элементе контейнера