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（＃社交设置）根本不会添加.highlight类。我对javascript和jquery很新，感谢所有的帮助。提前谢谢大家。

Answer 1

<错过</ul>。当我将此<添加到/ul>时，浏览器中的所有内容都很顺利。

添加 console.log(div_one_top,div_two_top); console.log(scroll_top); 在if语句之前，您可以从控制台检查数据。

Answer 2

我会把它改成这样。

$(document).ready(function () {

/* Since the position of these elements on the

页面没有更改，您不希望每次页面滚动时重新计算它们将它们移出的更有效率滚动功能。 * /

var div_one_top = $('#Profile-settings').position().top;
var div_two_top = $('#social-settings').position().top;

/* You need to grab the body tag and wrap 
     it in parentheses. */
    $('body').scroll(function () {
        /* you can use this since the body is the
         context element that you are passing in. */
        var scroll_top = $(this).scrollTop();

        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');


        }
    });

    });

Answer 3

在这里，添加的css仅用于演示，只有js部分很重要。

＆＃13;

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll_top = $(window).scrollTop();
    var div_one_top = $('#Profile-settings').offset().top;
    var div_two_top = $('#social-settings').offset().top;

    if (scroll_top > div_one_top && scroll_top < div_two_top) {
      //You are now past div one
      if (!$('a[href="#Profile-settings"]').hasClass('active')) {
        $('a[href="#Profile-settings"]').addClass('active');
      }

      if ($('a[href="#social-settings"]').hasClass('active')) {
        $('a[href="#social-settings"]').removeClass('active');
      }

    } else if (scroll_top > div_two_top) {
      if ($('a[href="#Profile-settings"]').hasClass('active')) {
        $('a[href="#Profile-settings"]').removeClass('active');
      }

      if (!$('a[href="#social-settings"]').hasClass('active')) {
        $('a[href="#social-settings"]').addClass('active');

      }
    }
  });
});

＆＃13;

.active {
  color: red;
}

section{
  min-height: 110vh;
}

#sidebar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#sidebar li{
  display: inline-block;
}

#sidebar li a{
  color: white;
}

#sidebar li a.active {
  color: red;
}

#Profile-settings{
  background-color: blue;
}
#social-settings{
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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">
  Profile section
</section>

<section id="social-settings">
  Social section
</section>

＆＃13;

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

3 个答案: