在 Firefox 上滚动导航项目时切换活动 class

Question

我试图在滚动时在导航项目上切换 class 活动状态，它适用于所有浏览器。但是当我在 firefox 上测试它时，我发现它有问题并且无法正常工作。知道如何解决吗？

$(window).on("scroll", function (event) {
        var $scrollPos = $(document).scrollTop(),
            $links = $('.nav li a');
        $links.each(function () {
            var $currLink = $(this),
                $refElement = $($currLink.attr("href"));
            if ($refElement.position().top <= $scrollPos + 100 && $refElement.position().top + $refElement.height() > $scrollPos) {
                $links.removeClass("active").blur();
                $currLink.addClass("active");
            } else {
                $currLink.removeClass("active");
            }
        });
   
    });

ul {
  position:fixed;
  top:0;
  }
ul li {
  display:inline-block;
  margin-right:10px;
  }
.nav li a.active {
    color:red;
  }
.test {
  height:1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="nav">
    <div class="logo">
     <img class="img-responsive" alt="logo" src="img/deco.svg"/>
     <span>RPF</span>
    </div>
    <li id="tt1">
     <a class="smooth" href="#home">
      <i class="menu fa fa-home"></i>
      <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt1">home</div>
     </a>
                </li>
    <li id="tt2">
     <a class="smooth" href="#about">
      <i class="menu zmdi zmdi-account-box-o"></i>
      <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt2">about</div>
     </a>
                </li>
    <li id="tt3">
     <a class="smooth" href="#education">
      <i class="menu zmdi zmdi-graduation-cap"></i>
      <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt3">education</div>
     </a>
                </li>
    <li id="tt4">
     <a class="smooth" href="#experience">
      <i class="menu fa fa-trophy"></i>
      <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt4">experience</div>
     </a>
                </li>
    <li id="tt5">
     <a class="smooth" href="#portfolio">
      <i class="menu fa fa-briefcase"></i>
      <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt5">portfolio</div>
     </a>
                </li>
    <li id="tt6">
     <a class="smooth" href="#contact">
      <i class="menu zmdi zmdi-email "></i>
      <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt6">contact</div>
     </a>
                </li>
   </ul>
  </div>

<div class="test" id="home"></div>
<div class="test" id="about"></div>
<div class="test" id="education"></div>
<div class="test" id="experience"></div>
<div class="test" id="portfolio"></div>
<div class="test" id="contact"></div>

提前致谢。

Answer 1

问题出在 JQuery 版本中。当我将其更改为旧版本时有效。

在 Firefox 上滚动导航项目时切换活动 class

Toggle active class while scrolling for nav items on firefox

firefox

jquery

scroll

toggle

nav