固定标题视差滚动

Question

我试图让页面的内容部分在横幅图像上进行微小的视差滚动，同时保持导航/标题固定不动。

现在，图像和内容视差都位于导航区域的顶部。 有人可以帮忙吗？

 * { margin:0; padding:0; } p { margin-top: 20px; margin-bottom: 20px; } /* #image-wrapper { position: fixed; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 1px; perspective-origin: 0 0; } */ .image { transform-origin: 0 0; transform: translateZ(-1px) scale(2); } #myBanner { display: block; width: 100%; height: 300px; } .content { position: relative; background: rgba(0,0,0,0.8); color: #fff; height: 900px; max-width: 3000px; margin:5% auto; top: -92px; } header { height: 120px; width: 100%; margin-bottom: 82px; border: 1px solid black; } #test { position: fixed; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 1px; perspective-origin: 0 0; } 

 <div id="test"> <header></header> <div id="image-wrapper"> <div class="image"> <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" id="myBanner" /> </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> </div> 

Answer 1

为了创建视差效果，您需要设置背景图像并将其background-attachment属性设置为fixed，然后在滚动时会产生视差的错觉。 请参阅此链接到小提琴。

在您的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。