Parallax scroll with sticky header

Question

thanks in advance for any suggestions. I'm trying to build a site that uses a basic parallax scroll element. Basically, the header is positioned 60% from the top of the page. As the user scrolls, the content below the header catches up to the header and flows underneath it.

I can get all this to work perfectly, but I'd also like the header to stick to the top of the page when it gets up there. I've gotten it to sort of work, but when the header is stuck, it's very flashy/jumpy. I've seen other people with similar problems, and they seem to stem from switching the header position from static to fixed, but in my layout, the header is always fixed, so I'm a bit perplexed. Maybe the positioning I'm using seems a bit strange, but after much experimentation, this is the closest I could get it.

Here's a JSFiddle, and the 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

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

Change your header for position:absolute;

In the document.ready, keep the initial position of your header in a Var (in order to detect when the header should keep his position while scrolling top) :

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

And add this following jquery to detect scroll position :

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

        $('#header').css({
            position:"absolute",
            top:initialPos+"px"
        });
    }

FIDDLE

Answer 2

its caused because you're scroll function applies the css to the header every time it is called, which is every time the user scrolls. When it gets applied it is constantly jumping between the 2 values in your if statement.

i think a better way to execute this would be by applying a class to the header once it is in the top position and styling that class in css. Then even if the addClass() is applied multiple times, the css wont cause it to 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 3

The "Scrollorama" plugin handles this quite well! Look at the "Pin it" and "Parallax" sections here: http://johnpolacek.github.io/scrollorama/ . Personally, when I am trying to create a smooth transition, I have found the best luck using these plugins rather than trying to write them myself.

Another thing to look into is Stellar.js. Extremely easy to use, and if you can use background position transitions rather than element transitions it's a lot smoother and less jumpy. Stellar.js and Scrollorama work together beautifully.

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