使用 JQuery On Scroll 切换类活动答案

【问题标题】：Toggle Class Active with JQuery On Scroll使用 JQuery On Scroll 切换类活动
【发布时间】：2016-12-20 00:37:06
【问题描述】：

我试图在滚动时切换导航链接中的活动类，这是我的代码：

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

.nav {
  background-color:#222;
  padding:15px 10px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.nav ul li {
  display:inline;
  margin:0 20px;
}
.nav ul li a {
  text-decoration:none;
  color:#fff;
}
.active {
  color:red;
}
#home,#about,#services,#contact {
  height:600px;
}
h1 {
  text-align:center;
  font-size:30px;
  padding:100px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav">
    <ul>
        <li><a href="#home" class="smoothScroll">Home</a></li>
        <li><a href="#about" class="smoothScroll">About</a></li>
        <li><a href="#services" class="smoothScroll">Services</a></li>
        <li><a href="#contact" class="smoothScroll">Contact</a></li>
    </ul>
</div>

<div id="home"> <h1>Home</h1> </div>
<div id="about"> <h1>about</h1> </div>
<div id="services"> <h1>services</h1> </div>
<div id="contact"> <h1>contact</h1> </div>

但是出了点问题，它不起作用 - 也许有人可以帮助我找出我的错误在哪里。

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

使用.nav ul li a.active 而不是.active，因为.nav ul li a 比.active 更特定风格 - 请参阅下面的演示：

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

.nav {
  background-color:#222;
  padding:15px 10px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.nav ul li {
  display:inline;
  margin:0 20px;
}
.nav ul li a {
  text-decoration:none;
  color:#fff;
}
.nav ul li a.active {
  color:red;
}
#home,#about,#services,#contact {
  height:600px;
}
h1 {
  text-align:center;
  font-size:30px;
  padding:100px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="nav">
    <ul>
        <li><a href="#home" class="smoothScroll">Home</a></li>
        <li><a href="#about" class="smoothScroll">About</a></li>
        <li><a href="#services" class="smoothScroll">Services</a></li>
        <li><a href="#contact" class="smoothScroll">Contact</a></li>
    </ul>
</div>

<div id="home"> <h1>Home</h1> </div>
<div id="about"> <h1>about</h1> </div>
<div id="services"> <h1>services</h1> </div>
<div id="contact"> <h1>contact</h1> </div>

【讨论】：

【解决方案2】：

在你的 CSS 中使用它而不是只使用 .active:

.nav ul li a.active {
    color:red;
}

或者你可以像这样使用!important：

.active {
    color:red!important;
}

但要小心，请阅读此subject

【讨论】：

问题不在 css 中。我已经在实际项目中这样做了，但遇到了同样的问题。