视差滚动与粘性标题 [英] Parallax scroll with sticky header

问题描述

提前感谢任何建议。我试图建立一个使用基本的视差滚动元素的网站。基本上，标题位于距页面顶部60％。随着用户滚动，标题下面的内容追上到标题并在其下面流动。

我可以得到所有这一切完美地工作，但我也喜欢的标题，坚持在页面的顶部，当它在那里。我已经得到了一些工作，但是当标题被卡住，它是非常华丽/跳跃。我看到其他人有类似的问题，他们似乎源自将标题位置从静态切换到固定，但在我的布局，标题总是固定的，所以我有点困惑。也许我使用的位置似乎有点奇怪，但经过多次实验，这是最接近我可以得到它。

这里是一个JSFiddle，代码： / p>

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

JQuery：

  $ （window）.scroll（function（）{
 var scrolled = $（window）.scrollTop（）; 
 if（scrolled> $（'＃header'）。offset 
 $（'＃header'）。css（'top'，' -  60％'）; 
} 
 else {
 $（'＃header'）。css 'top'，（0-（scrolled * 0.6））+'px'）; 
} 
}）; 
  

CSS：

 code> 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>滚动时此标题应该显示在顶部。< / div> 
< div id =content>内容在这里< / div>非常感谢您的帮助！
解决方案
它的原因是因为你滚动功能在每次调用时都将css应用到标题，这是每次用户滚动时。当它被应用时，它不断地在你的if语句中的2个值之间跳跃。
 
 
 
我认为一个更好的方法来执行这将是通过应用一个类到头一次它在顶部位置和样式css中的类。那么即使addClass（）被多次应用，css也不会导致它跳转。
  if（scrolled> $ （'#header'）。offset（）。top）{
 $（'＃header'）。addClass（'top'）; 
} 
 
 .top {
 top：60px; //或者你希望它在移动时保持的数量
} 
  
 
thanks in advance for any suggestions. I'm trying to build a site that uses a basic parallax scroll element. Basically, the header is positioned 60% from the top of the page. As the user scrolls, the content below the header catches up to the header and flows underneath it. 

I can get all this to work perfectly, but I'd also like the header to stick to the top of the page when it gets up there. I've gotten it to sort of work, but when the header is stuck, it's very flashy/jumpy. I've seen other people with similar problems, and they seem to stem from switching the header position from static to fixed, but in my layout, the header is always fixed, so I'm a bit perplexed. Maybe the positioning I'm using seems a bit strange, but after much experimentation, this is the closest I could get it.

Here's a JSFiddle, and the code:

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>
Thanks for any help!
解决方案
its caused because you're scroll function applies the css to the header every time it is called, which is every time the user scrolls. When it gets applied it is constantly jumping between the 2 values in your if statement.

i think a better way to execute this would be by applying a class to the header once it is in the top position and styling that class in css. Then even if the addClass() is applied multiple times, the css wont cause it to jump.
if( scrolled > $('#header').offset().top){
    $('#header').addClass('top');
}

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


                        
这篇关于视差滚动与粘性标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！