仅在页面中间显示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