Javascript 当用户滚动到平滑滚动的部分时，如何添加活动类？

我正在构建一个简单的单页网站&使用JQuery更改页面上导航链接的颜色。我已经实现了平滑滚动，它可以很好地转到每个锚点。我还实现了一个特性，允许用户向下滚动页面&活动类被应用到导航中的锚上，改变颜色

情况基本正常……除了： 当您单击导航链接时，活动类未应用于正确的链接

到目前为止，我已经尝试过改变类的应用方式&以及直接id的名称，但它的行为仍然不完美。显然，

$（'.nav li'）.eq（i）.find（'a'）.addClass（'active'）发生了错误

有人能建议我如何解决这个问题吗

以下是带有html的CP：

多谢各位

JS:

$（窗口）.on（'scroll'，function（）{
var WindowTop=$（window.scrollTop（）；
$（“部分”）。每个（功能（i）{
if（WindowTop>$（this）.offset（）.top-50&&
WindowTop<$（此）.offset（）.top+$（此）.outerHeight（真）
){
$（'.nav>li>a'）.removeClass（'active'）；
$（'.nav li'）.eq（i）.find（'a'）.addClass（'active'）；
}
});
});
$（'a[href*=#]：非（[href=#]）。单击（函数（）{
if（location.pathname.replace（/^\/，''）==this.pathname.replace（/^\/，''）和&location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});,

HTML:

测试










关于

标题标题副本

第3节描述

标题标题副本

我们的菜单
提供选项标题
一些很酷的东西

标题说明

保留地
联系信息在此
fdsfdsf
fds
现在预订
新闻稿
菜
&抄袭；2019英尺
```
您可以使用lib简化实现：


您的所有javascript将如下所示：

        var addClassOnScroll = function () {
            $('section[id]').each(function (index, elem) {
                if($(elem).is(':appeared')) {
                    const elemId = $(elem).attr('id');
                    $("nav ul li a.active").removeClass('active');
                    $("nav ul li a[href='#" + elemId + "']").addClass('active');
                }
            });
        };

        $(window).on('scroll', function () {
            addClassOnScroll();
        });

不带lib的选项：

 var addClassOnScroll = function () {
            var windowTop = $(window).scrollTop();
            $('section[id]').each(function (index, elem) {
                var offsetTop = $(elem).offset().top;
                var outerHeight = $(this).outerHeight(true);

                if( windowTop > (offsetTop - 50) && windowTop < ( offsetTop + outerHeight)) {
                    var elemId = $(elem).attr('id');
                    $("nav ul li a.active").removeClass('active');
                    $("nav ul li a[href='#" + elemId + "']").addClass('active');
                }
            });
        };

        $(function () {
            $(window).on('scroll', function () {
                addClassOnScroll();
            });
        });

var addClassOnScroll=函数（）{
var windowTop=$（window.scrollTop（）；
$（'section[id'）。每个（函数（索引，元素）{
var offsetTop=$（elem）.offset（）.top；
var outerHeight=$（this）.outerHeight（true）；
中频（窗顶>（偏置-50）和窗顶<（偏置+外光））{
var elemId=$（elem.attr（'id'）；
$（“nav ul li a.active”）.removeClass（“active”）；
$（“nav ul li a[href='#“+elemId+']”）addClass（'active'）；
}
        var addClassOnScroll = function () {
            $('section[id]').each(function (index, elem) {
                if($(elem).is(':appeared')) {
                    const elemId = $(elem).attr('id');
                    $("nav ul li a.active").removeClass('active');
                    $("nav ul li a[href='#" + elemId + "']").addClass('active');
                }
            });
        };

        $(window).on('scroll', function () {
            addClassOnScroll();
        });

 var addClassOnScroll = function () {
            var windowTop = $(window).scrollTop();
            $('section[id]').each(function (index, elem) {
                var offsetTop = $(elem).offset().top;
                var outerHeight = $(this).outerHeight(true);

                if( windowTop > (offsetTop - 50) && windowTop < ( offsetTop + outerHeight)) {
                    var elemId = $(elem).attr('id');
                    $("nav ul li a.active").removeClass('active');
                    $("nav ul li a[href='#" + elemId + "']").addClass('active');
                }
            });
        };

        $(function () {
            $(window).on('scroll', function () {
                addClassOnScroll();
            });
        });