我在页面上有一个绝对位置的“英雄”部分。向下滚动页面时,我希望下面的内容滚动到英雄部分的顶部。
为此,当您向下滚动页面时,我会更新下部内容的top
位置。但是,这样做似乎是将英雄单位推离页面,而不是简单地滚动到页面顶部。
HTML:
<div class="container">
<section class="hero">
<div class="hero-content">
<h1>loud noises.</h1>
<p class="strapline">we make loud noises so you don't have to</p>
</div>
</section>
<div class="inner">
<section class="feature-1">
<h2>Some awesome feature</h2>
</section>
<section class="feature-2">
<h2>Some awesome feature</h2>
</section>
<footer></footer>
</div>
</div>
CSS:
.hero {
position: absolute;
background-color: #3498db;
text-align: center;
overflow: hidden;
z-index: 0;
background-color: #fff;
/*max-height: 768px; set the height limit here */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.inner {
position: relative;
top: 100%;
z-index: 100;
}
JavaScript:
$(window).scroll(function () {
$('.inner').css('top', $('.hero').height() - $(window).scrollTop());
});
演示:
http://fiddle.jshell.net/benfosterdev/LycXL/
最佳答案
看来您已赋予.hero
绝对值,而不是尝试使用fixed
的CSS
.hero {
position: fixed;
}
Working jsFiddle Demo