Scrolling Parallax with a Sticky Header

Question

in advance for any suggestions. I am trying to create a site that uses the basic parallax scroll element. Basically, the title is 60% of the top of the page. When the user scrolls, the content under the heading reaches the heading and flows under it.

I can make it all work fine, but I would also like the title to go to the top of the page when it gets up there. I got a job, but when the heading is stuck, it is very flashy / nervous. I saw other people with similar problems, and they seem to be related to switching the position of the title from static to fixed, but in my layout the title is always fixed, so I'm a little puzzled. Perhaps the positioning I use seems a little strange, but after much experimentation, this is the closest I could get.

Here's the JSFiddle and code:

http://jsfiddle.net/kromoser/Lq7C6/11/

JQuery

$(window).scroll(function() { var scrolled = $(window).scrollTop(); if (scrolled > $('#header').offset().top) { $('#header').css('top','-60%'); } else { $('#header').css('top',(0-(scrolled*0.6))+'px'); } }); 

CSS

 body { margin: 0; padding: 0; width: 100%; height: 100%; } #header { position: fixed; top: 0; margin-top: 60%; z-index: 3; background: #FFF; width: 100%; } #content { min-height: 100%; position: relative; top: 100%; } 

HTML:

 <div id="header">This header should stick to top when scrolled.</div> <div id="content">Content goes here</div> 

Thanks for any help!

Answer 1

this is because you use the scroll function, applying CSS to the header every time it is called, every time the user scrolls. When applied, it constantly jumps between two values ​​in an if statement.

I think the best way to accomplish this is to apply the class to the header when it is in the top position, and style this class in css. Then even if addClass () is applied multiple times, css will not make it jump.

 if( scrolled > $('#header').offset().top){ $('#header').addClass('top'); } .top { top: 60px; // or whatever amount you want it to stay when it is done moving } 

Answer 2

I tried this and I think this should be something for you.

Change your title to position:absolute;

In document.ready, save the starting position of your title in Var (to determine when the title should keep its position when scrolling up):

 var initialPos = $('#header').offset().top; 

And add this following jquery to determine the scroll position:

 if( scrolled > initialPos){ $('#header').css({ position:"fixed", top:'0px' }); }else{ $('#header').css({ position:"absolute", top:initialPos+"px" }); } 

Fiddle

Answer 3

The Scrollorama plugin does a great job with this! Check out the sections "Pin it" and "Parallax" here: http://johnpolacek.imtqy.com/scrollorama/ . Personally, when I try to create a smooth transition, I found the best luck using these plugins instead of writing myself.

Another thing worth paying attention to is Stellar.js. Extremely easy to use, and if you can use background transitions rather than element transitions, it is much smoother and less indecisive. Stellar.js and Scrollorama work great together.

http://markdalgleish.com/projects/stellar.js/