z góry dzięki za wszelkie sugestie. Próbuję zbudować witrynę, która używa podstawowego elementu przewijania paralaksy. Zasadniczo nagłówek jest umieszczony w 60% od góry strony. Gdy użytkownik przewija, zawartość pod nagłówkiem dociera do nagłówka i płynie pod nim.

Mogę sprawić, żeby wszystko działało idealnie, ale chciałbym również, aby nagłówek trzymał się na górze strony, gdy się tam pojawi. Udało mi się to zrobić, ale kiedy nagłówek jest zablokowany, jest bardzo krzykliwy. Widziałem innych ludzi z podobnymi problemami i wydaje się, że wywodzą się z zamiany pozycji nagłówka ze statycznej na poprawioną, ale w moim układzie nagłówek jest zawsze stały, więc jestem trochę zakłopotany. Być może pozycjonowanie, którego używam, wydaje się nieco dziwne, ale po wielu eksperymentach jest to najbliższe.

Oto JSFiddle i kod:

http://jsfiddle.net/kromoser/Lq7C6/11/

JQuery:

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled > $('#header').offset().top) {
        $('#header').css('top','-60%');
     }
    else {
        $('#header').css('top',(0-(scrolled*0.6))+'px');
     }
});

CSS:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#header {
  position: fixed;
  top: 0;
  margin-top: 60%;
  z-index: 3;
  background: #FFF;
  width: 100%;
}
#content {
  min-height: 100%;
  position: relative;
  top: 100%;
}

HTML:

<div id="header">This header should stick to top when scrolled.</div>
<div id="content">Content goes here</div>

Dzięki za pomoc!