jquery - sticky subscribe box at bottom -

hi guys m working on sticky subscribe box below site

https://generalassemb.ly/

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');}            });