滚动切换Content元素Active类的jQuery代码实现需求

我来帮你搞定这个滚动切换的需求！下面是完整的可运行代码，逻辑清晰完全匹配你的要求：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .main { 
            height: 2000px; /* 加高一点让滚动测试更明显 */
            position: relative; 
            width: 100%; 
        }
        .image { 
            position: fixed; 
            top: 0%; 
            left: 0; 
            height: 500px; 
            max-width: 100%; 
        }
        .content { 
            position: absolute; 
            top: 0; 
            opacity: 0;
            transition: opacity 0.3s ease; /* 加过渡动画让切换更平滑 */
        }
        .active { 
            opacity: 1; 
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="content active"> content 1 </div>
        <div class="content"> content 2 </div>
        <!-- 可以随意添加更多content元素，代码会自动适配 -->
        <div class="content"> content 3 </div>
        <div class="content"> content 4 </div>
        <div>
            <img src="https://image01.oneplus.net/ebp/201711/10/1712/9350700c52f43348092d34664711c51d.png" class="image">
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 记录上一次滚动位置，用来判断滚动方向
            let lastScrollTop = 0;
            const $contents = $('.content');
            const totalContents = $contents.length;

            $(window).scroll(function() {
                const scrollTop = $(this).scrollTop();
                const currentActive = $contents.filter('.active');
                const currentIndex = $contents.index(currentActive);

                // 向下滚动逻辑：scrollTop大于上一次位置
                if (scrollTop > lastScrollTop) {
                    // 不是最后一个content时，切换到下一个
                    if (currentIndex < totalContents - 1) {
                        currentActive.removeClass('active');
                        $contents.eq(currentIndex + 1).addClass('active');
                    }
                } else {
                    // 向上滚动逻辑：scrollTop小于上一次位置
                    // 不是第一个content时，切换到上一个
                    if (currentIndex > 0) {
                        currentActive.removeClass('active');
                        $contents.eq(currentIndex - 1).addClass('active');
                    }
                }

                // 更新上一次滚动位置
                lastScrollTop = scrollTop;
            });
        });
    </script>
</body>
</html>

关键逻辑说明 #

• 滚动方向判断：通过对比当前滚动位置scrollTop和上一次记录的lastScrollTop，区分向上/向下滚动动作。
• Active类切换规则：
  • 向下滚动时，若当前激活的不是最后一个内容块，就移除它的active类，给下一个内容块添加active。
  • 向上滚动时，若当前激活的不是第一个内容块，就切换到上一个内容块的active状态。
• 小优化：给.content加了过渡动画，让透明度切换更自然；同时调高了.main的高度，确保有足够的滚动空间测试多次切换。

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