Исправлена ​​прокрутка Parallax Header

Question

Я пытаюсь, чтобы часть содержимого моей страницы делала крошечную прокрутку параллакса над изображением баннера, сохраняя при этом навигацию/заголовок фиксированной и неподвижной.

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

* 
 
{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
p 
 
{ 
 
    margin-top: 20px; 
 
\t \t margin-bottom: 20px; 
 
} 
 

 
/* #image-wrapper 
 
{ 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow-x: hidden; 
 
\t overflow-y: scroll; 
 
\t perspective: 1px; 
 
\t perspective-origin: 0 0; 
 
} */ 
 

 
.image 
 
{ 
 
\t transform-origin: 0 0; 
 
\t transform: translateZ(-1px) scale(2); 
 
} 
 

 
#myBanner 
 
{ 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 300px; 
 
} 
 

 
.content 
 
{ 
 
\t position: relative; 
 
\t background: rgba(0,0,0,0.8); 
 
\t color: #fff; 
 
\t height: 900px; 
 
\t max-width: 3000px; 
 
    margin:5% auto; 
 
\t top: -92px; 
 
} 
 

 
header 
 
{ 
 
\t height: 120px; 
 
\t width: 100%; 
 
\t margin-bottom: 82px; 
 
\t border: 1px solid black; 
 
\t 
 
} 
 

 
#test 
 
{ 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow-x: hidden; 
 
\t overflow-y: scroll; 
 
\t perspective: 1px; 
 
\t perspective-origin: 0 0; 
 
}

<div id="test"> 
 

 
\t <header></header> 
 
<div id="image-wrapper"> 
 
\t <div class="image"> 
 
\t \t <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" id="myBanner" /> 
 
\t </div> 
 

 

 
<div class="content"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi cum quam perspiciatis nostrum harum fugit vitae eaque! Eligendi voluptas natus, nostrum dolorum quam nesciunt? Veniam libero illo, itaque corporis consectetur.</p> 
 
<p>Tempore quasi illo ipsa est animi natus doloribus tenetur provident error, atque nisi voluptates ad quod expedita mollitia, quaerat aut exercitationem? Ullam ab pariatur facere veritatis, officia quos dicta placeat?</p> 
 
<p>Nam sapiente aspernatur nisi molestias architecto, ipsum provident voluptatum accusamus numquam cum fugit optio dolorum asperiores mollitia? Sunt voluptas pariatur esse quas fugit architecto consequuntur, sit ullam, explicabo libero ea.</p> 
 
<p>Velit rem obcaecati perferendis est minus quisquam asperiores blanditiis earum quis eos ducimus neque dolores quibusdam dolor quod ad corporis voluptate, aliquid, in explicabo recusandae iure. Magni a quos molestiae.</p> 
 
</div> 
 
</div> 
 
\t 
 
\t </div>

Answer 1

Для создания эффекта параллакса вам нужно установить фоновое изображение и установите его свойство фон-вложения в фиксированные, а затем прокручивать это даст иллюзию parallaxing. См. Ссылку this на скрипку.

В вашем HTML я изменил образ, чтобы стать фоновым изображением в настоящее время:

<div class="image" style="background-image: url(http://i.imgur.com/hPLqUtN.jpg);"></div> 

И

Я изменил некоторые стили в вашем CSS и удалить CSS, который не был полезным/делать ничего:

header { 
    height: 120px; 
    width: 100%; 
    border: 1px solid black; 
} 
.image { 
    /* Set a specific height - this can be changed to whatever you want */ 
    height: 500px; 
    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
.content { 
    background: rgba(0, 0, 0, 0.8); 
    color: #fff; 
    height: 900px; 
    max-width: 3000px; 
    margin: 0 auto; 
} 

Ссылка на скрипт содержит весь код, включая все HTML/CSS.