滚动时为部分可见元素添加class的问题及解决需求

我懂你遇到的这个问题了——当Module的高度超过屏幕高度时，原代码的visible()方法默认只检测完全可见的元素，所以永远无法触发module-active类。咱们只需要简单调整两处就能实现“部分可见就激活”的需求：

问题根源 #

原代码中调用$(this).visible()时没有传入参数，默认使用partial=false的逻辑，只有当元素完全处于视口内时才返回true。对于高度超过屏幕的Module来说，永远无法满足“完全可见”的条件，所以module-active类永远不会被添加。

解决方案 #

1. 修改visible()方法的调用参数 #

在checkVisible函数里，给visible()传入true，启用“部分可见”的检测逻辑：

2. 完整修改后的代码 #

JavaScript 部分

$.fn.visible = function(partial) {
    var $t = $(this),
        $w = $(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        // partial=true时，检测元素与视口是否有交集
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
}

$(document).ready(function(e) {
    checkVisible();
});

$(window).scroll(function(e) {
    checkVisible();
});

function checkVisible() {
    $('.module').each(function(i, k) {
        // 传入true，启用部分可见检测
        if ($(this).visible(true)) {
            $(k).addClass('module-active');
        } else {
            $(k).removeClass('module-active');
        }
    });
}

CSS 部分

.module {
    position: relative;
    left: -100px;
    opacity: 0;
    transition: opacity 2s, left 2s;
}

.module.module-active {
    opacity: 1;
    top: 0;
    left: 0;
}

可选优化：保留已激活的类 #

如果你的需求是只要Module进入过视口就保持module-active类（不需要在滚出时移除），可以直接去掉else分支：

function checkVisible() {
    $('.module').each(function(i, k) {
        if ($(this).visible(true)) {
            $(k).addClass('module-active');
        }
        // 移除移除类的逻辑，保留已激活状态
    });
}

这样就能实现“只要模块部分可见就触发激活，且激活后不再取消”的效果，完全符合你提到的“必要时可以移除removeClass逻辑”的需求。

内容的提问来源于stack exchange，提问作者Schalk Joubert