僅在頁面中間顯示div

Question

我希望當頁面從頁面頂部滾動時希望淡入div，但是我希望此div在接近底部時再次隱藏這一頁。

具體而言，我希望div在頂部200px或底部200px內隱藏。

我有兩個獨立工作的腳本，但是當兩者都處於活動狀態時，兩者之間的衝突會導致div閃爍和閃爍。

我該如何結合以下腳本來避免這種衝突？非常感激任何的幫助。謝謝！

$(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 200) { 
      $('#myDiv').fadeIn(500); 
     } else { 
      $('#myDiv').fadeOut(500); 
     } 
    }); 
}); 

和

$(function() { 
    $(window).scroll(function() { 
     if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { 
      $('#myDiv').fadeIn(500); 
     } else { 
      $('#myDiv').fadeOut(500); 
     } 
    }); 
}); 

Answer 1

這個怎麼樣：

$(function() { 
    var $window = $(window); 

    $window.scroll(function() { 
     var scrollTop = $(this).scrollTop(); 

     // only fadeIn between 200 from top and 200 from bottom 
     if (scrollTop > 200 && scrollTop < $(document).height() - $window.height() - 200) { 
      $('#myDiv').fadeIn(500); 
     } else { 
      $('#myDiv').fadeOut(500); 
     } 
    }); 
}); 

Example fiddle