Javascript 粘性导航上的活动类

我的粘性导航：

<nav id="page-nav" class="page-nav">
    <ul>    
        <li><a href="#top" class="linky active">Overview</a></li>
        <li><a class="linky" href="#sub-our-drainage-solutions">Our drainage solutions</a></li>
        <li><a class="linky" href="#sub-cctv-drain-survey">CCTV drain survey</a></li>
        <li><a class="linky" href="#sub-wet-waste-disposal">Wet waste disposal</a></li>
        <li><a class="linky" href="#sub-blocked-drains">Blocked drains</a></li>
        <li><a class="linky" href="#sub-cess-pit-emptying">Cess pit emptying</a></li>
    </ul>
</nav>

<div id="sub-our-drainage-solutions">

</div>

<div id="sub-cctv-drain-survey">

</div>

导航粘贴到滚动窗口的顶部，我还需要它在通过相关div id时更改锚点上的活动类

我在scroll上遇到以下错误：

Uncaught TypeError: Cannot read property 'top' of null

由于这部分代码：

$(window).scroll(function() {
            var y = $(this).scrollTop();
            $('.linky').each(function(event) {
                id = $(this).attr('href');
                if (y >= $(id).offset().top -30) {
                    if (!linkClicked) { 
                        $('.linky').not(this).removeClass('active');
                        $(this).addClass('active');
                    }
                }
            });

        });

---

我能做些什么来解决这个问题呢？

不确定您的代码发生了什么，但是这个代码片段对我来说很好，可以更改scroll和smooth scrolling上的活动类

$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
//平滑卷轴
$（“#导航小调a[href^=“#”]”）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'#导航小调a'）。每个（函数（）{
$（this.removeClass（'active'）；
})
$（this.addClass（'active'）；
var target=this.hash，
菜单=目标；
变量$target=$（目标）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top+2
}，500，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
函数onScroll（事件）{
var scrollPo=$（document.scrollPo（）；
$（'#nav minor a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPo）{
$（'导航小调a'）。删除类（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}

您的

id

包含

href

字符串值！，您需要jQuery对象在这里获取

.offset（）.top（）

添加

控制台.log（id）

并查看这是什么returns@DhavalMarthak您能解释一下吗？@Spokey console.log每次滚动窗口时都返回每个链接的href属性是否有ID为

#top

的元素？第一个

linky

到达那里，如果该元素不存在，它将抛出一个错误

$(window).scroll(function() {
            var y = $(this).scrollTop();
            $('.linky').each(function(event) {
                id = $(this).attr('href');
                if (y >= $(id).offset().top -30) {
                    if (!linkClicked) { 
                        $('.linky').not(this).removeClass('active');
                        $(this).addClass('active');
                    }
                }
            });

        });