固定ヘッダー視差スクロール

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を含むすべてのコードが含まれています。