Question

当用户滚动到特定元素的顶部时，我想添加一个类。

我目前有这段代码，但正如您所看到的，这取决于页面顶部的像素。我希望它是当页面滚动到元素的顶部时，因为我使用百分比并使网站响应，因此页面顶部的像素将根据屏幕大小而变化。

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 610) {
        $("header").addClass("header-animate");
    } else {
        $("header").removeClass("header-animate");
    }
});

如果您需要更多详细信息，请与我们联系。

感谢。

Answer 1

你应该做的是使用元素类或ID，并从顶部获取它的距离：

*请注意，您可能需要切换它是> 0还是< 0

if (scroll - $('#someElement').position().top > 0) {
    $('.header').addClass('header-animate')
}else {
    $('.header').removeClass('header-animate')
}

Answer 2

您可以执行以下操作：

var element = $('.element').offset().top;
$(window).scroll(function(){
    if ($(this).scrollTop() > element){         
        $('.navigation').addClass('header-animate');         
    }
    else{        
        $('.navigation').removeClass('header-animate');        
    }
});

滚动到/超过另一个元素顶部的animate元素

2 个答案: