javascript - How to move 1 div faster/over a div when the page is scrolled -

javascript - How to move 1 div faster/over a div when the page is scrolled -

i saw effect here. main content section of page moves on , above div when page scrolled.

i tried recreating effect using parallax effect,but in vain.the issue using parallax,i can alter speed of 2 objects within same div only.also apart that,i have set unncessary tags on page create script work.

is there simpler(or working) way accomplish effect?thanks lot

you can css.

#head, #subhead{ position: fixed; height: 80px; width: 100%; display: block; left: 0; top: 0; z-index: 10; /* on top of */ } #subhead{ z-index: 4; /* below */ top: 80px; /* height of top div */ } #content{ position: relative; z-index: 6; /* below top div, above 1 below */ margin-top: 160px; /* height of 2 divs above combined */ }

and create 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)); });

javascript jquery html css scroll