У меня есть раздел "герой" на моей странице. При прокрутке страницы я хотел бы, чтобы содержимое ниже прокручивалось в верхней части раздела героя.
Для этого я обновляю 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());
});
Демо-версия:
Кажется, вы дали абсолютную ценность .hero
, вместо того, чтобы пытаться использовать fixed
CSS
.hero {
position: fixed;
}
Фон должен быть исправлен.
Добавить
фон-вложение: фиксированный;
к вашему.hero: после класса.
.inner
.