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

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部分事项。

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

 
     } 
 
    } 
 
    }); 
 
});

.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; 
 
}

<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>