Свиток параллакса с липким заголовком

Спасибо заранее за любые предложения. Я пытаюсь создать сайт, который использует элемент прокрутки параллакса. По сути, заголовок расположен на 60% от верхней части страницы. Когда пользователь прокручивает, содержимое под заголовком перехватывает заголовок и течет под ним.

Я могу заставить все это работать отлично, но я также хотел бы, чтобы заголовок прилипал к верхней части страницы, когда он там поднимался. Я получил его для своего рода работы, но когда заголовок застрял, он очень броский / нервный. Я видел других людей с похожими проблемами, и они, кажется, происходят от переключения положения заголовка со статического на фиксированное, но в моем макете заголовок всегда фиксирован, поэтому я немного озадачен. Может быть, расположение, которое я использую, кажется немного странным, но после долгих экспериментов, это самое близкое, что я мог получить.

Вот JSFiddle и код:

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>

Спасибо за любую помощь!

Ответы на вопрос(3)

Ваш ответ на вопрос