仅在页面中间显示div

当页面滚动离开页面顶部时，我希望淡入div，但是我希望在接近页面底部时再次隐藏这个div。

具体来说，我想在顶部的200px或底部的200px内隐藏div。

我有两个独立工作的脚本，但是当它们都处于活动状态时，两者之间的冲突会导致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); } }); }); 

示例小提琴