Question

我添加了

function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

window.scroll

jQuery(window).scroll(function(){

    if (isScrolledIntoView('h2') === true) {
        jQuery('h2').addClass('in-view')
    }
    else {jQuery('h2').removeClass('in-view')
    }
});

问题是当页面上的顶部h2可见时，会添加和删除类。我想在每个人进入浏览器窗口时触发每个h2。

请原谅我，我是javascript的新手。

Answer 1

由于它已经适用于第一个h2，因此您只需使用.each为其他h2元素重复此操作：

jQuery(window).scroll(function(){
    $("h2").each(function() {
        if (isScrolledIntoView(this) === true) {
            jQuery(this).addClass('in-view')
        }
        else {
            jQuery(this).removeClass('in-view')
        }
    });
});

Answer 2

尝试将代码应用于每个h2元素

jQuery(window).scroll(function(){
    $("h2").each(function{
        if (isScrolledIntoView(this) === true) {
            jQuery(this).addClass('in-view')
        }
        else {
            jQuery(this).removeClass('in-view')
        }
    });
});

Jquery在页面视图上添加类

2 个答案: