活动链接适用于页面刷新但不滚动？

该代码似乎工作，如果你刷新页面的例如如果您滚动到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

感谢您的链接，但我希望能够做到我自己也:) –

活动链接适用于页面刷新但不滚动？

回答

相关问题