Agradecemos antecipadamente por qualquer sugestão. Eu estou tentando construir um site que usa um elemento básico de rolagem paralaxe. Basicamente, o cabeçalho é posicionado a 60% do topo da página. Conforme o usuário rola, o conteúdo abaixo do cabeçalho alcança o cabeçalho e flui por baixo dele.

Eu posso fazer tudo isso funcionar perfeitamente, mas eu também gostaria que o cabeçalho ficasse no topo da página quando chegasse lá. Eu comecei a funcionar, mas quando o cabeçalho está preso, é muito chamativo / saltitante. Eu já vi outras pessoas com problemas semelhantes, e elas parecem derivar de mudar a posição do cabeçalho de estático para fixo, mas no meu layout, o cabeçalho é sempre fixo, então estou um pouco perplexo. Talvez o posicionamento que estou usando pareça um pouco estranho, mas depois de muita experimentação, isso é o mais próximo que eu consegui.

Aqui está um JSFiddle e o 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>

Obrigado por qualquer ajuda!