Question

我希望在页面滚动离开页面顶部时淡入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);
        }
    });
});

Example fiddle

仅在页面中间显示div

1 个答案: