javascript - 使用滚动突出显示侧边栏链接

Question

我有一个设置页面的边栏，就像一个索引。每次滚动到页面的不同部分时，我都希望突出显示适当的链接。我意识到之前有人问过这个问题，我尝试按照 previous question 中的说明进行操作.我也看了几个博客，虽然他们的代码看起来很复杂。

HTML

        <div id="sidebar">

              <nav class="navlinks">
                    <ul style="list-style:none" id="sidebar-id">

                             <li> <a href="#Profile-settings"> Profile </a></li>
                             <li> <a href="#social-settings"> Social Media </a></li>
                             <li> <a href="#"> Logout </a></li>

                      /ul>
                  </nav>       
             </div>

<section id="Profile-settings">
    <!--some content-->
    </section>

         <section id="social-settings">
    <!--some content-->
    </section>

CSS:

.active {
    color:red;    
}

JS

$(document).ready(function () {

    $(document).scroll(function () {
        var scroll_top = $(document).scrollTop();
        var div_one_top = $('#Profile-settings').position().top;
        var div_two_top = $('#social-settings').position().top;

        if(scroll_top > div_one_top && scroll_top < div_two_top) {
            //You are now past div one
            $('a[href="#Profile-settings"]').addClass('active');
            $('a[href="#social-settings"]').removeClass('active');
        } else if (scroll_top > div_two_top) {
            $('a[href="#social-settings"]').addClass('active');
            $('a[href="#Profile-settings"]').removeClass('active');


        }
    });

    });

当我运行它时，只有 <li> <a href="#Profile-settings">Profile</a></li>不断显示事件类，这意味着当我滚动到底部或顶部时它不会改变。第二个li (#social 设置)不会有 .highlight类被添加到它的所有。我是 javascript 和 jquery 的新手，非常感谢所有帮助。提前谢谢大家。

Answer 1

您错过了 <对于 </ul> .当我添加这个<至 /ul> ，在我的浏览器中一切正常。

添加
console.log(div_one_top,div_two_top);
console.log(scroll_top);
之前 if声明，您可以从控制台查看数据。