粘在底部

Question

嗨，大家好訂閱箱即時通訊的粘性工作訂閱框像下面的網站

https://generalassemb.ly/

我用下面的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 is visible on screen after DOM loaded 
      $('.subscribeBox').fadeOut(1000); 
     } else { 
      $('.subscribeBox').fadeIn(1000); 
     } 
    }  
}); 

，但問題是我要補充還有一個功能，當滾動量大於200時，訂閱框變得可見其他虎鉗隱藏的PLZ讓我提出一些建議如何去做。

Answer 1

經過大量嘗試，我發現它的解決方案......從只是一個愚蠢的錯誤......

HTML是

<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> 

這裏是純粹的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() { 
    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');}   
});