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: '/' } );
    }
}

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

将div滚出视口后隐藏div，但保持滚动位置

1 个答案: