求助：jQuery实现滚动到特定区域加类、离开移除类的问题

问题分析 #

你第二段代码的问题在于，只拿滚动位置和目标section的offset().top做比较——当滚动到section顶部后，继续往下滚动，scrollTop始终大于这个top值，所以else永远不会触发，类也就不会被移除。正确的逻辑应该是判断滚动位置是否处于目标section的可视范围内（即滚动位置进入section的顶部到底部之间）。

修正方案 #

先计算目标section的完整范围：

• 顶部位置：$('.construction').offset().top
• 底部位置：顶部位置 + section自身的高度（$('.construction').outerHeight()）

然后在滚动事件里，判断当前滚动位置是否落在这个区间内，同时结合视口高度判断，确保section进入视口时添加类，完全离开视口时移除类。

修正后的jQuery代码：

// 获取目标section的位置和高度
const $targetSection = $('.construction');
const sectionTop = $targetSection.offset().top;
const sectionBottom = sectionTop + $targetSection.outerHeight();

$(window).scroll(function() {
    // 获取当前滚动的顶部位置，加上视口高度，判断视口底部的位置
    const scrollBottom = $(this).scrollTop() + $(this).height();
    
    // 当视口底部进入section顶部，且滚动顶部未超过section底部时，添加类
    if (scrollBottom > sectionTop && $(this).scrollTop() < sectionBottom) {
        $('.sidebar_list').addClass('shrink');
    } else {
        $('.sidebar_list').removeClass('shrink');
    }
});

额外优化建议 #

• 滚动事件会频繁触发，可通过节流函数减少触发次数，提升页面性能：

function throttle(func, delay) {
    let lastCall = 0;
    return function() {
        const now = Date.now();
        if (now - lastCall >= delay) {
            func.apply(this, arguments);
            lastCall = now;
        }
    };
}

// 用节流包装滚动事件，每100ms触发一次
$(window).scroll(throttle(function() {
    const scrollBottom = $(this).scrollTop() + $(this).height();
    if (scrollBottom > sectionTop && $(this).scrollTop() < sectionBottom) {
        $('.sidebar_list').addClass('shrink');
    } else {
        $('.sidebar_list').removeClass('shrink');
    }
}, 100));

• 如果页面存在动态内容（比如图片加载导致section高度变化），需要在内容加载完成后重新计算sectionTop和sectionBottom，避免位置偏差。

内容的提问来源于stack exchange，提问作者Sherwin Justine Villanueva Man