jquery - 带有粘性标题的视差滚动

Question

提前感谢您的任何建议。我正在尝试构建一个使用基本视差滚动元素的网站。基本上，页眉位于距页面顶部 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>

感谢您的帮助!

Answer 1

我试过了，我想这应该适合你。

更改 position:absolute; 的 header

在 document.ready 中，将页眉的初始位置保存在 Var 中(以便检测页眉何时应该在滚动顶部时保持其位置):

var initialPos =  $('#header').offset().top;

并添加下面的 jquery 来检测滚动位置:

if( scrolled > initialPos){
        $('#header').css({
           position:"fixed",
           top:'0px'
        });
    }else{

        $('#header').css({
            position:"absolute",
            top:initialPos+"px"
        });
    }

FIDDLE