Прокрутка с параллаксом - прокрутка абсолютного элемента

Прокрутка с параллаксом - прокрутка абсолютного элемента

У меня на странице есть абсолютно позиционный "геройский" раздел. При прокрутке страницы вниз я хотел бы, чтобы содержимое ниже прокручивалось над верхней частью раздела героев.

Для этого я обновляю позицию 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/

Показать лучший ответ

Фон должен быть исправлен.

Добавить

<цитата>

background-attachment: исправлено;

в ваш .hero: после уроков.

Кажется, вы присвоили абсолютное значение .hero . Вместо этого попробуйте использовать fixed

CSS

 .hero {
    position: fixed;
}
  

Рабочая демонстрация jsFiddle

Это сработало, и это означает, что мне действительно не нужен javascript для установки верхней позиции .inner .