0

在此先感谢您的任何建议。我正在尝试构建一个使用基本视差滚动元素的网站。基本上，标题位于页面顶部的 60% 处。当用户滚动时，标题下方的内容会赶上标题并在其下方流动。

我可以让这一切完美地工作，但我也希望页眉在它出现时粘在页面顶部。我已经完成了一些工作，但是当标题卡住时，它非常华丽/跳跃。我见过其他人有类似的问题，他们似乎源于将标题位置从静态切换到固定，但在我的布局中，标题总是固定的，所以我有点困惑。也许我使用的定位似乎有点奇怪，但经过大量实验，这是我能得到的最接近的定位。

这是一个JSFiddle，代码：

http://jsfiddle.net/kromoser/Lq7C6/11/

查询：

$(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>

谢谢你的帮助！

4

3 回答 3

2

我试过这个，我认为这应该适合你。

更改您的标题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"
        });
    }

小提琴

于 2013-10-21T15:25:12.027 回答
1

这是因为您的滚动功能在每次调用时都将 css 应用于标题，即每次用户滚动时。当它被应用时，它会不断地在 if 语句中的两个值之间跳转。

我认为执行此操作的更好方法是将一个类应用于标题，一旦它位于顶部位置并在 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
}
于 2013-10-21T15:20:32.177 回答
1

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

另一件需要研究的是 Stellar.js。非常易于使用，如果您可以使用背景位置转换而不是元素转换，它会更加平滑且不那么跳跃。Stellar.js 和 Scrollorama 完美地协同工作。

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

于 2013-10-21T15:22:36.240 回答