用滾動突出顯示側邊欄鏈接

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>