仅在页面中间显示div [英] Only show div when in the middle of the page

问题描述

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

I'm hoping to fade in a div when the page has been scrolled away from the top of the page, however I want this div to be hidden again when approaching the bottom of the page.

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

To be specific, I want the div to be hidden when within 200px of the top or 200px of the bottom.

我有两个独立工作的脚本，但是当两个脚本都处于活动状态时，两者之间的冲突会导致div闪入和闪出视图.

I have two scripts which work independently, but when both active, a conflict between the two causes the div to flash in and out of view.

我如何结合以下脚本来避免这种冲突?非常感激任何的帮助.谢谢！

How would I combine the following scripts to avoid this conflict? Any help would be most appreciated. Thanks!

$(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);
        }
    });
});

推荐答案

这是怎么回事:

$(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);
        }
    });
});

小提琴示例

这篇关于仅在页面中间显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！