0
Ich habe versucht, Klasse aktiv auf Nav-Elemente während des Scrollens und es funktioniert mit allen Browsern. aber als ich es auf Firefox getestet habe, fand ich es abgehört und nicht funktioniert. irgendeine Idee, wie man es löst?Aktive Klasse beim Scrollen für Nav-Elemente auf Firefox einschalten
$(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>Dank im Voraus.