html - Sticking two div simultaneously to window top using jquery -
i know topic has been discussed here before facing difficulties 1 of problems solved. want stick 2 div(s) top @ same time. (e.g: when layer2 sticks top, want layer 2 stick top different height , width) trying stick 1 div not working.
html
<div id="layer1"></div> <div id="sticky-anchor"></div> <div id="layer2"></div> <div id="layer3"></div>
js
jquery(document).ready(function($){ $(window).scroll(sticky_relocate); sticky_relocate(); }); function sticky_relocate(){ var s=$('#layer2'); var pos = s.position(); var window_top = $(window).scrolltop(); var div_top = $('#sticky-anchor').offset().top; s.html("distance top:" + pos.top + "<br />scroll position: " + window_top); if(window_top>div_top){ s.addclass('stick'); } else{ s.removeclass(); } }
css
#layer2 { position: absolute; text-align: left; left: 0px; top: 276px; width: 950px; height: 57px; z-index: 1; } .stick { position:fixed; top:0; }
i here , know how should stick 2 divs @ same time. in advance.
Comments
Post a Comment