Gracias de antemano por cualquier sugerencia. Estoy tratando de construir un sitio que utiliza un elemento de desplazamiento de paralaje básico. Básicamente, el encabezado se coloca al 60% de la parte superior de la página. A medida que el usuario se desplaza, el contenido debajo del encabezado alcanza el encabezado y fluye debajo de él.

Puedo hacer que todo esto funcione perfectamente, pero también me gustaría que el encabezado se pegue a la parte superior de la página cuando llegue allí. Lo tengo para una especie de trabajo, pero cuando el encabezado está atascado, es muy llamativo. He visto a otras personas con problemas similares, y parecen derivarse de cambiar la posición del encabezado de estática a fija, pero en mi diseño, el encabezado siempre es fijo, por lo que estoy un poco perplejo. Tal vez el posicionamiento que estoy usando parece un poco extraño, pero después de mucha experimentación, esto es lo más cerca que puedo conseguirlo.

Aquí hay un JSFiddle, y el código:

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>

¡Gracias por cualquier ayuda!