javascript - 仅在页面中间时显示 div

Question

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

具体来说，我希望 div 在距顶部 200px 或距底部 200px 以内时隐藏。

我有两个独立工作的脚本，但是当两个脚本都处于事件状态时，两者之间的冲突会导致 div 闪烁进出 View 。

如何组合以下脚本来避免这种冲突？非常感激任何的帮助。谢谢!

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