0
스크롤하는 동안 탐색 항목에서 Active 클래스를 토글하려고했는데 모든 브라우저에서 정상적으로 작동합니다. 하지만 파이어 폭스에서 테스트했을 때 나는 그것이 도청되고 작동하지 않는 것을 발견했다. 어떤 생각이 그것을 해결하는 방법? 사전에Firefox에서 nav 항목을 스크롤하는 동안 활성 클래스를 토글합니다.
$(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">
\t \t \t \t <div class="logo">
\t \t \t \t \t <img class="img-responsive" alt="logo" src="img/deco.svg"/>
\t \t \t \t \t <span>RPF</span>
\t \t \t \t </div>
\t \t \t \t <li id="tt1">
\t \t \t \t \t <a class="smooth" href="#home">
\t \t \t \t \t \t <i class="menu fa fa-home"></i>
\t \t \t \t \t \t <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt1">home</div>
\t \t \t \t \t </a>
</li>
\t \t \t \t <li id="tt2">
\t \t \t \t \t <a class="smooth" href="#about">
\t \t \t \t \t \t <i class="menu zmdi zmdi-account-box-o"></i>
\t \t \t \t \t \t <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt2">about</div>
\t \t \t \t \t </a>
</li>
\t \t \t \t <li id="tt3">
\t \t \t \t \t <a class="smooth" href="#education">
\t \t \t \t \t \t <i class="menu zmdi zmdi-graduation-cap"></i>
\t \t \t \t \t \t <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt3">education</div>
\t \t \t \t \t </a>
</li>
\t \t \t \t <li id="tt4">
\t \t \t \t \t <a class="smooth" href="#experience">
\t \t \t \t \t \t <i class="menu fa fa-trophy"></i>
\t \t \t \t \t \t <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt4">experience</div>
\t \t \t \t \t </a>
</li>
\t \t \t \t <li id="tt5">
\t \t \t \t \t <a class="smooth" href="#portfolio">
\t \t \t \t \t \t <i class="menu fa fa-briefcase"></i>
\t \t \t \t \t \t <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt5">portfolio</div>
\t \t \t \t \t </a>
</li>
\t \t \t \t <li id="tt6">
\t \t \t \t \t <a class="smooth" href="#contact">
\t \t \t \t \t \t <i class="menu zmdi zmdi-email "></i>
\t \t \t \t \t \t <div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt6">contact</div>
\t \t \t \t \t </a>
</li>
\t \t \t </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>감사합니다.