提前感谢您的任何建议。我正在尝试构建一个使用基本视差滚动元素的网站。基本上,页眉位于距页面顶部 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>
感谢您的帮助!
最佳答案
我试过了,我想这应该适合你。
更改 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"
});
}
关于jquery - 带有粘性标题的视差滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19497983/