jquery - 将 div 滚动出视口(viewport)后隐藏它，但保持滚动位置

Question

我有一个全屏框(#doorMat)，可以在页面加载时弹出查看。该框有一个链接，可以单击以关闭它(效果很好)，并且我正在尝试创建一个功能，以便在用户向下滚动页面经过它时将其删除。我希望将 DoorMat div 移除/分离，但不让屏幕随之调整。

这是我当前的代码:

var height = $(window).height();

$(window).scroll(function() {
var scroll = $(window).scrollTop();

if ( scroll > height ) {
    hideDoorMat();
}
});

function hideDoorMat() {
if($('#doorMat').length){
var scroll = $(window).scrollTop();
$('#doorMat').remove();
$('body').animate({
    scrollTop: $("#content").offset().top
});
}
}

它可以工作，除了当我滚动经过门垫时，内容仍然向上移动，并且滚动回内容时存在延迟。谁能告诉我哪里出错了？

Answer 1

希望这对您有帮助: http://jsfiddle.net/s6dozk4y/

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if ( scroll > height ) {
        hideDoorMat(true);
        window.scrollTo(0, 0);
    }
});

和:

function hideDoorMat(withoutAnimation) {
    if($('#doorMat').length){
    var scroll = $(window).scrollTop();
    $('#doorMat').remove();
    if(!withoutAnimation){
     $('body').animate({
           scrollTop: $("#content").offset().top
        });
    }
    Cookies.set( 'b2wcookie', 'doormat', { expires: 1, path: '/' } );
    }
}

我已禁用动画并调整元素删除时的窗口滚动位置。