Прыгающий фон под липким верхним баром навигации Основание 5

Question

Я хочу поставить фон под верхней панелью навигации в разделе заголовка, используя фреймворк Foundation. Я сделал что-то подобное. Он работает, но когда я прокручиваю фон, он выглядит как прыжок изображения.

<header> 
    <div class="contain-to-grid sticky"> 
     <nav class="top-bar" data-topbar role="navigation"> 
      <ul class="title-area"> 
       <li class="name"> 
        <h1><a href="#">Logo</a></h1> 
       </li> 
      <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li> 
      </ul> 
     </nav> 
    </div> 
</header> 

И вот css для заголовка, который является первым элементом заголовка после тела.

body > header { 
    background-image: url("../img/jumbotron.jpg"); 
    background-position: center center; 
    height: 712px; } 

Answer 1

кажется, что причина для «скачки» является 45px обивки-топ, приложенный к телу сразу после строки меню получает позицию фиксированную.

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

Вы можете использовать правило обходного пути, как этот:

body.f-topbar-fixed > header { 
    background-position-y: -45px; 
} 

Но я предпочел бы избавиться от этой верхней прокладки, если это не является строго необходимым.