基于div ID滚动为对应画廊子元素批量添加in-view类的需求

可以通过批量选择元素+动态提取序号的方式实现，不用为每个元素写重复代码，下面是完整的优化方案：

$(function(){
    // 缓存所有目标元素，避免滚动时重复DOM查询
    const $items = $('[id^="item-"]');
    const $galleryItems = $('.sticky-gallery .image-item');
    const offsetThreshold = 250; // 提前触发的偏移量

    // 防抖函数：避免滚动事件频繁触发
    function debounce(func, delay = 100) {
        let timer;
        return function() {
            clearTimeout(timer);
            timer = setTimeout(() => func.apply(this, arguments), delay);
        };
    }

    // 滚动处理逻辑
    function handleScroll() {
        const scrollTop = $(document).scrollTop();
        
        $items.each(function() {
            // 提取当前item的序号（从id里拆分）
            const itemIndex = parseInt(this.id.split('-')[1]);
            // 找到对应的gallery子元素（注意:nth-child是从1开始计数的，刚好匹配）
            const $targetGalleryItem = $galleryItems.eq(itemIndex - 1);
            // 计算当前item的触发位置
            const triggerPosition = $(this).offset().top - offsetThreshold;

            // 用toggleClass简化添加/移除类的逻辑
            $targetGalleryItem.toggleClass('in-view', scrollTop >= triggerPosition);
        });
    }

    // 绑定防抖后的滚动事件
    $(document).scroll(debounce(handleScroll));
    
    // 页面加载时先执行一次，避免初始状态错误
    handleScroll();
});

关键逻辑说明： #

• 批量选择元素：用属性选择器[id^="item-"]直接选中所有id以item-开头的div，不用逐个指定id
• 动态提取序号：通过split('-')[1]拆分id字符串，提取后面的数字序号，对应到gallery里的子元素索引
• 简化状态切换：用toggleClass('in-view', 条件)替代传统的if-else，当条件为true时添加类，false时移除
• 性能优化：
  • 提前缓存DOM元素，避免每次滚动都重新查询
  • 加入防抖函数，减少滚动事件的触发频率，提升页面流畅度
  • 页面加载时主动执行一次逻辑，确保初始状态正确

注意事项： #

• 确保.sticky-gallery .image-item的数量和#item-*的数量一一对应，序号匹配
• 如果需要调整提前触发的距离，修改offsetThreshold的值即可

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