Прокрутка липкого заголовка, вызывающего следующий div, чтобы прыгать, когда он достигает вершины

Question

У меня проблема с прокручиваемым заголовком, она начинается жизнь в нижней части браузера, как только страница прокручивается вниз, а заголовок достигает вершины, он исправляет.

Проблема заключается в том, когда она исправляется, следующий div скажет, что высота заголовка переместится вверх.

Вот мой JQuery

var elementPosition = $('header').offset(); 

$(window).scroll(function(){ 
    if($(window).scrollTop() > elementPosition.top){ 
     $('header').addClass("stick"); 
    } else { 
     $('header').removeClass("stick"); 
    } 
}); 

и вот CSS

.stick { 
    position:fixed; 
    top:0; 
} 

Answer 1

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

Одним из решений является добавление «призрак» div, который имеет ту же высоту, что и заголовок, и скрыт по умолчанию.

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

Другим решением является добавление «margin-top» к следующему контенту, каков бы ни был ваш заголовок. Это будет иметь тот же эффект и будет препятствовать остальной части содержимого страницы.