活動鏈接適用於頁面刷新但不滾動？

該代碼似乎工作，如果你刷新頁面的例如如果您滾動到C部分並刷新頁面並滾動它可以識別您在該部分，但出於某種原因，它似乎並沒有動態滾動。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style media="screen"> 
     body, html { 
      padding: 0; 
      margin: 0; 
      height: 100%; 
     } 

     nav { 
      position: fixed; 
      top: 0; 
      width: 100%; 
      background: #f5f5f5; 
      text-align: center; 
     } 

     nav ul { 
      list-style: none; 
      display: inline-block; 
     } 

     nav ul li { 
      display: inline-block; 
      padding-right: 10px; 
     } 

     section { 
      height: 100%; 
      padding: 8rem; 
      color: #fff; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
     } 

     .sectionA { 
      background: orangered; 
     } 
     .sectionB { 
      background: steelblue; 
     } 
     .sectionC { 
      background: purple; 
     } 
     .sectionD { 
      background: black; 
     } 

     .active { 
      color: red; 
     } 

    </style> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li class="sectionA-marker">Section A</li> 
      <li class="sectionB-marker">Section B</li> 
      <li class="sectionC-marker">Section C</li> 
      <li class="sectionD-marker">Section D</li> 
     </ul> 
    </nav> 
    <section class="sectionA"> 
     <h2>Section A</h2> 
    </section> 
    <section class="sectionB"> 
     <h2>Section B</h2> 
    </section> 
    <section class="sectionC"> 
     <h2>Section C</h2> 
    </section> 
    <section class="sectionD"> 
     <h2>Section D</h2> 
    </section> 
</body> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<script type="text/javascript"> 
(function(){ 
    var scrollTop = $(document).scrollTop(); 
    var navHeight = $("nav").height(); 
    var sectionElement = $("section"); 

    $(document).on("scroll", function(){ 
     sectionElement.each(function(){ 
      var section = $(this); 

      if(section.offset().top < (scrollTop + navHeight) && (scrollTop + navHeight) < (section.offset().top + section.outerHeight())) { 
       var targetClass = "." + section.attr("class") + "-marker"; 
       $("nav ul li").removeClass("active"); 
       $(targetClass).addClass("active"); 
      } 
     }); 
    }); 
}()); 

</script> 
</html>

來源

2016-10-14 Joe Consterdine

以下是更正小提琴

https://jsfiddle.net/Lr53c1oh/3/

你需要在滾動事件每次得到scrollTop的電流值

$(document).on("scroll", function(){ 
var scrollTop = $(document).scrollTop(); 
//rest of the code

來源

2016-10-14 10:35:42

這是正確的答案..謝謝很多伴侶。 –

-1

編輯

對不起，我的第一個答案是很懶惰;

發生此問題是因爲您試圖比較每個部分的頂部不與屏幕的當前位置，而是頁面加載時獲得的位置。

因此事件應該是這樣的：

$(document).on("scroll", function(){ 
    // get new value of scrollTop after each event call 
    scrollTop = $(document).scrollTop(); 

    sectionElement.each(function(){ 
     var section = $(this); 

     if(section.offset().top < (scrollTop + navHeight) && (scrollTop + navHeight) < (section.offset().top + section.outerHeight())) { 
      var targetClass = "." + section.attr("class") + "-marker"; 
      $("nav ul li").removeClass("active"); 
      $(targetClass).addClass("active"); 
     } 
    }); 
});

來源

2016-10-14 10:20:24

感謝您的鏈接，但我希望能夠做到我自己也:) –

活動鏈接適用於頁面刷新但不滾動？

回答

相關問題