Question

在我的页面上，我的脚本中有一些布尔值，用于检查第一个屏幕是否已激活，以及第二个屏幕是否同样如此。屏幕1填满整个屏幕。

它看起来像这样：

var headerLoaded = true,
    contentLoaded = false;

当我滚动时，我希望页面自动滚动到我的网页的“内容”区域。我有这个代码：

$(window).scroll(function() {
    if (($(window).scrollTop() > 0) && (!contentLoaded && headerLoaded)) {
        $('html, body').animate({
            scrollTop: $('#content').offset().top
        }, 500, function() {
            contentLoaded = true;
            headerLoaded = false;
        });
    }
});

它会检查我是不是在页面的顶部，还是2个布尔值。

该功能效果很好，但它仍在调用

        $('html, body').animate({
            scrollTop: $('#content').offset().top
        }, 500, function() {
            contentLoaded = true;
            headerLoaded = false;
        });

部分当我向下滚动到'content'div。

因此，每当我在'content'div处滚动时，它会滚动回到顶部。

不过，两个div都是绝对的。

Answer 1

因此，动画会一遍又一遍地调用原始$(window).scroll(...)。

尝试告诉您的主scroll听众如果已经制作动画，则不要开始设置动画。

var animating = false;
$(window).scroll(function() {
    if (!animating && $(window).scrollTop() > 0 && !contentLoaded && headerLoaded) {
        animating = true;
        $('html, body').animate({
            scrollTop: $('#content').offset().top
        }, 500, function() {
            animating = false;
            contentLoaded = true;
            headerLoaded = false;
        });
    }
});

等等..我刚读完.. 你只是将屏幕锁定在内容上......为什么要制作动画？

我给出的答案是说动画滚动也会触发主卷轴，导致无限循环...但是你想要做的首先是什么？

jQuery滚动到滚动事件的某个点

1 个答案: