切换类主动与jQuery在滚动

Question

我试图切换主动类的导航链接，同时滚动，这里是我的代码：

$(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>

但出了问题，它不工作 - 也许有人可以帮我找出我的错在哪里。

Answer 1

使用这个在你的CSS，而不是只.active：

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

或者您可以使用!important这样的：

.active { 
    color:red!important; 
} 

但是要小心，阅读本subject

Answer 2

使用.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>