带有标头的视差滚动

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;

在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"
        });
    }

小提琴

Answer 2

这是由于滚动功能导致的，因为每次滚动时（用户每次滚动），css都会将css应用于标题。 应用后，它将在if语句中的2个值之间不断跳转。

我认为，执行此操作的更好方法是，一旦在标题中将一个类应用于顶部，然后在CSS中对该类进行样式设置。 然后，即使多次应用addClass（），css也不会导致其跳转。

if( scrolled > $('#header').offset().top){
    $('#header').addClass('top');
}

.top {
  top: 60px; // or whatever amount you want it to stay when it is done moving
}

Answer 3

“ Scrollorama”插件处理得很好！ 在此处查看“固定”和“视差”部分： http : //johnpolacek.github.io/scrollorama/ 。 就个人而言，当我尝试创建平稳过渡时，我发现使用这些插件而不是自己编写它们是最好的运气。

要研究的另一件事是Stellar.js。 极其易于使用，而且如果您可以使用背景位置过渡而不是元素过渡，那么它会更加平滑且不易跳动。 Stellar.js和Scrollorama可以完美地协作。

http://markdalgleish.com/projects/stellar.js/