jquery - sticky subscribe box at bottom -
hi guys m working on sticky subscribe box below site
i used following js
$.fn.is_on_screen = function(){ var win = $(window); var viewport = { top : win.scrolltop(), left : win.scrollleft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerwidth(); bounds.bottom = bounds.top + this.outerheight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; $(window).scroll(function(){ // bind window scroll event if( $('#foot').length > 0 ) { // if target element exists in dom if( $('#foot').is_on_screen() ) { // if target element visible on screen after dom loaded $('.subscribebox').fadeout(1000); } else { $('.subscribebox').fadein(1000); } } });
but problem have add 1 more functionality when scroll amount >200 subscribe box visible other vise hidden plz make me suggestion how it.
after lots of try find solution... silly mistake...
html is
<header id="head"> <p>fixed naviagtion</p> </header> <div class="content"> <p>some content</p> </div> <footer id="footer"> <p>footer contents</p> </footer> <div class="subscribebox"> <p>subscribe me</p> </div>
here pure js code..
$.fn.is_on_screen = function(){ var win = $(window); var viewport = {top : win.scrolltop(),left : win.scrollleft()}; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerwidth(); bounds.bottom = bounds.top + this.outerheight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; $(window).scroll(function() { if ($(window).scrolltop() > $('#head').height() ) { if( $('#foot').length > 0 ) { if( $('#foot').is_on_screen() ) { $('.subscribebox').fadeout('slow'); }else {$('.subscribebox').fadein('slow');} }} else{$('.subscribebox').fadeout('slow');} });
Comments
Post a Comment