How to move 1 div faster/over a div when the page

Question

I saw this effect here. The main content section of the page moves over and above a div when the page is scrolled.

I tried recreating this effect using the parallax effect,but in vain.The issue is that using parallax,i can change the speed of 2 objects within the same div only.Also apart from that,i will have to put some unncessary tags all over the page to make the script work.

Is there a simpler(or working) way to achieve this effect?Thanks a lot

Answer 1

You can do this with CSS.

#head, #subHead{
    position: fixed;           
    height: 80px;    
    width: 100%;
    display: block;
    left: 0;
    top: 0;
    z-index: 10;         /* on top of all */
}

#subHead{
    z-index: 4;          /* below all */
    top: 80px;           /* height of the top div */
}

#content{
    position: relative;
    z-index: 6;          /* below the top div, but above the one below it */
    margin-top: 160px;   /* the height of the two divs above combined */
}

And to make subHead scroll slower:

window.onscroll = function(ev){
  var subHead = document.getElementById('subHead'),
      topHeight = document.getElementById('head').offsetHeight;

  subHead.style.top = (topHeight - document.body.scrollTop / 4) + 'px';
};    

jQuery:

$(window).on('scroll', function(){  
  $('#subHead').css('top', ($('#head').height() - $('body').scrollTop() / 4));
}); 

Answer 2

There definitely seems to be some parallax going on at least. I haven't looked through the markup thoroughly enough, but one thing of note is that the area with the graphic and the content area (along with the area for the ads) are sibling <div>s.

Just top of head, with some CSS positioning and z-indexing, it'd be a bit straightforward to render the content <div> above the graphic <div>. It seems that only the graphic <div> is being controlled via parallax scrolling. If that makes sense.

Answer 3

You could attach onscroll event for your first div and set scroll position of second div in your JS.

<div id="div1" onscroll="OnScrollDiv()">
    <div id="div2"></div>
</div>

javascript:

function OnScrollDiv () {
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div2.scrollTop = div1.scrollTop * 2;
}

More info in here: http://help.dottoro.com/ljurkcpe.php http://help.dottoro.com/ljnvjiow.php