Vielen Dank im Voraus für alle Vorschläge. Ich versuche, eine Site zu erstellen, die ein grundlegendes Parallaxen-Scroll-Element verwendet. Grundsätzlich befindet sich die Kopfzeile 60% vom oberen Seitenrand entfernt. Während der Benutzer einen Bildlauf durchführt, wird der Inhalt unter der Kopfzeile mit der Kopfzeile abgeglichen und fließt darunter.

Ich kann das alles perfekt zum Laufen bringen, aber ich möchte auch, dass der Header oben auf der Seite bleibt, wenn er dort hochkommt. Ich habe es zur Arbeit gebracht, aber wenn der Header feststeckt, ist es sehr auffällig / nervös. Ich habe andere Leute mit ähnlichen Problemen gesehen, und sie scheinen darauf zurückzuführen zu sein, dass sie die Kopfzeilenposition von statisch auf fest geändert haben, aber in meinem Layout ist die Kopfzeile immer fest und daher bin ich etwas ratlos. Vielleicht scheint die Positionierung, die ich benutze, ein bisschen seltsam zu sein, aber nach vielem Experimentieren ist dies die beste, die ich bekommen kann.

Hier ist eine JSFiddle und der Code:

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>

Danke für jede Hilfe!