Przewijanie lepkich nagłówków przeskakujących

Question

Tworzę nagłówek, który utknie w miejscu, gdy użytkownik przewinie w dół o określoną liczbę pikseli. Mój nagłówek ma wysokość 121 pikseli, ale część nagłówka, którą chcę przykleić, to dolne 42 piksele nagłówka; co działa, ale w momencie, gdy zaczyna się wbijać, strona przeskakuje o około 50 pikseli.

Moja myśl o tym, co może być przyczyną problemu, to $('#header').css({position: 'fixed'});. Myślę, że po zastosowaniu fixed treści, zawartość div nie bierze już pod uwagę marginesu. Próbowałem grać z różnymi pozycjami, ale nic mi się nie udało.

Stworzyłem , aby lepiej zilustrować mój problem.

kod jQuery

$(window).scroll(function() 
{ 
    if($(window).scrollTop() > 79) 
    { 
     $('#header').css({position: 'fixed'}); 
    } 
    else 
    { 
     $('#header').css({position: 'static', top: '-79px'}); 
    } 
}); 

kod CSS

body { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    width: 100%; 
    height: 121px; 
    background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png); 
} 
#content { 
    margin: 10px auto; 
    width: 300px; 
    min-height: 600px; 
} 

HTML

<div id="header">header</div> 
<div id="content">content goes here</div> 

Answer 1

Oto problem:

Gdy nagłówek ma "statyczne" pozycjonowanie, wypycha zawartość, aby nie nakładała się na nią. Kiedy pozycjonowanie zmienia się z "statycznego" na "stały", nie obchodzi już, czy pokrywa się z treścią, więc treść "przeskakuje" na górę strony, ponieważ uważa, że ​​nie ma w niej nic.

Istnieje wiele poprawek do tego problemu:

Najprostszym z nich jest prawdopodobnie dodać kolejny element, który zasadniczo zajmuje się przestrzeń, że nagłówek wtedy gdy zmiany pozycjonowania.

Zrobiłem to poprzez zmianę sposobu wyświetlania elementu do „blok”, gdy nagłówek jest „stałe” i „brak”, kiedy głowica jest „statyczne”

Oto zaktualizowana JSFiddle: http://jsfiddle.net/6kPzW/2/

HTML kod: Kod

<div id="header">header</div> 
<div id="header_placeholder"></div> 
<div id="content">Content</div> 

CSS:

body { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    width: 100%; 
    height: 121px; 
    background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png); 
} 
#content { 
    margin: 10px auto; 
    width: 300px; 
    min-height: 600px; 
} 
#header_placeholder { 
    height:121px; 
    width:100%; 
    display:none; 
} 

kod jQuery:

$(window).scroll(function() 
{ 
    if($(window).scrollTop() > 79) 
{ 
     $('#header').css({position: 'fixed'}); 
     $('#header_placeholder').css({display: 'block'}); 
} 
else 
{ 
     $('#header').css({position: 'static', top: '-79px'}); 
     $('#header_placeholder').css({display: 'none'}); 
} 
});