Fixed Header Parallax Scroll

Question

I am attempting to have the content portion of my page do a tiny parallax scroll over the banner image, while keeping the nav/header fixed and unmoving.

Right now, both the image and the content parallax over top of the nav section. Would anyone be able to help?

*
{
    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>

Your problem is not being replicated by the code you added. Please add the full code. — ab29007, Jan 10 '17 at 15:12

score 0 · Answer 1 · answered Jan 10 '17 at 15:14

In order to create the parallax effect you need to set a background image and set its background-attachment property to fixed and then as you scroll it will give the illusion of parallaxing. Please see this link to a fiddle.

In your HTML I have changed the image to become a background image now:

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

AND

I have changed some styles in your CSS and removed the css that wasn't helpful/doing anything:

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;
}

The link to the fiddle has all the code including all the HTML/CSS.

Fixed Header Parallax Scroll

1 Answers1