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

Question

我试图在滚动时在导航项目上切换类 Active，它适用于所有浏览器。但是当我在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 版本中。 当我将其更改为旧版本时有效。