jQuery滚动导航高亮报错scrollTop不是函数问题修复

• 控制台报错scrollTop is not a function是因为scrollTop()是jQuery封装的方法，原生JS的window对象不存在这个方法，直接调用window.scrollTop()属于非法调用。
• 代码中直接遍历的items（页面内容区块）、navItems（导航链接）两个变量从未声明赋值，逻辑执行时会直接抛出引用错误。
• 原有逻辑没有考虑顶部固定导航栏的高度占位，滚动到区块触发高亮时，区块顶部会被导航栏遮挡；且页面滚动到底部时最后一个区块无法正常触发高亮。

补全缺失的变量定义，修正scrollTop的调用对象，增加导航高度偏移优化高亮触发时机，简化高亮切换逻辑减少不必要的DOM遍历。

修复后的核心JS代码 #

$(document).ready(function(){
    // 提前缓存DOM集合，避免滚动事件触发时重复查询
    const navItems = $('.menu a');
    const items = $('div[id]'); // 匹配所有带id的内容区块
    const navHeight = $('.menu').outerHeight(); // 获取导航栏高度做偏移计算

    $(window).scroll(function() {
        // 修正scrollTop调用：用jQuery包装window对象后再调用方法
        const scrollTop = $(window).scrollTop();
        let currentId = '';

        // 遍历区块判断当前可视区域对应的区块id
        items.each(function(){
            const itemTop = $(this).offset().top - navHeight;
            if(scrollTop >= itemTop){
                currentId = $(this).attr('id');
            }
        });

        // 批量切换导航高亮状态
        navItems.removeClass('active');
        navItems.filter(`[href="#${currentId}"]`).addClass('active');
    });
});

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滚动导航高亮</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        ul.menu{
            position: fixed;
            top: 0;
            width: 100%;
            background: #fff;
            margin: 0;
            padding: 10px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        ul.menu li{
            display:inline-block;
            list-style: none;
            margin-right: 10px;
        }

        .menu li a{
            text-decoration: none;
            color: #333;
            padding: 4px 8px;
        }

        a.active{
            color: red;
            border-bottom: 2px solid red;
        }

        #home{
            margin-top: 80px;
        }

        #home, #profile, #aboutus, #contactus{
            min-height: 600px;
            padding: 0 20px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#contactus">Contact Us</a></li>
    </ul>

    <div id="home">
        <h3>this is home</h3>
    </div>
    <div id="profile">
        <h3>this is profile</h3>
    </div>
    <div id="aboutus">
        <h3>this is aboutus</h3>
    </div>
    <div id="contactus">
        <h3>this is contactus</h3>
    </div>

    <script>
        $(document).ready(function(){
            const navItems = $('.menu a');
            const items = $('div[id]');
            const navHeight = $('.menu').outerHeight();

            $(window).scroll(function() {
                const scrollTop = $(window).scrollTop();
                let currentId = '';

                items.each(function(){
                    const itemTop = $(this).offset().top - navHeight;
                    if(scrollTop >= itemTop){
                        currentId = $(this).attr('id');
                    }
                });

                navItems.removeClass('active');
                navItems.filter(`[href="#${currentId}"]`).addClass('active');
            });
        });
    </script>
</body>
</html>

• 修复了scrollTop调用错误，从根源解决控制台类型报错问题。
• 提前缓存DOM集合，避免每次滚动触发事件时都重复查询DOM，执行性能更高。
• 增加导航栏高度偏移计算，高亮触发时区块内容刚好出现在导航栏下方，不会被固定导航遮挡。
• 去掉原代码的双层循环逻辑，用筛选方法直接匹配对应导航项，代码更简洁易维护。
• 补充了导航栏阴影、激活项下划线等样式，调整区块高度方便测试滚动效果。

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