javascript - Always show a DIV as soon as its not visible any more after scrolling down? -
i have info box (div) on screen when user opens website. user scrolls down , box not visible user longer, want box appear in top right corner time while scrolling.
i know how make visible time (position: fixed). problem is, how know when not visible user ans more while scrolling? can use javascript, if helps. id prefer prototype js.
thanks!
you need make use of getboundingclientrect()
, returns element's positions relative viewport. if top
value below 0
, should fixed.
html:
<div id="stick"> should fixed… </div>
css:
#stick { position: absolute; top: 60px; } #stick.fixed { position: fixed; top: 0; }
js:
var stick = document.getelementbyid('stick'); window.onscroll = function(){ if(stick.getboundingclientrect().top < 0){ stick.classname = 'fixed'; } else if(stick.classname.indexof('fixed') < 0){ stick.classname = ''; } }
Comments
Post a Comment