滾動事件上的jQuery .addClass（）不起作用

Question

我是jQuery的新手，並且在滾動事件上遇到了addClass（）的問題。 這是我的代碼：

HTML：

<div class="sidebar">
    <ul>
        <li id="pop">Home</li>
        <li>Programs</li>
        <li>Replay</li>
    </ul>
 </div>

CSS：

.sidebar div {
 width: 150px;
 height: 250px;
 float: right;
 position: fixed;
 z-index: 1;
 }

 .sidebar ul {
 list-style-type: none; 
 padding-left: 0;
 position: fixed;
 }

 .sidebar li {
  background: gray;
  color: white;
  text-transform: uppercase; 
  font-size: 13px;
  width: 80px;
  }

  .active {
  width: 140px;
  background: orange;
  font-size: 25px;
  }

jQuery的：

$(document).ready(function() {
$(window).scroll(function() {

   var st = $(this).scrollTop(); 
   if( st > 500 ) {
   $("#pop").addClass("active"); 
   } else {
   $("#pop").removeClass("active"); 
   }
  }); 
 });

我也曾嘗試使用toggleClass（）失敗。 我無法弄清楚是什么阻止了它的工作。

預先感謝您的幫助。

Answer 1

像這樣更改：

CSS：

刪除此：

 .sidebar li {
  background: gray;
  color: white;
  text-transform: uppercase; 
  font-size: 13px;
  width: 80px;
  }

並添加：

.normal {
  font-size: 13px;
  background: gray;
  color: white;
  text-transform: uppercase; 
  width: 80px;
  }

  .active {
  width: 140px;
  background-color:orange;
  font-size: 25px;
  text-transform: uppercase;
  color: white;
  }

HTML：

將normal添加到li s

<ul>
  <li id="pop" class="normal">Home</li>
  <li class="normal">Programs</li>
  <li class="normal">Replay</li>
</ul>

jQuery的：

$(document).ready(function(){

    $(window).on("scroll",function() {

        if($(this).scrollTop() > 500) 

            $("#pop").removeClass("normal").addClass("active");

        else 

            $("#pop").removeClass("active").addClass("normal");


    })
})

最終代碼：

 <html> <title>This is test</title> <head> <style> body { height: 2500px; } .sidebar div { width: 150px; height: 250px; float: right; position: fixed; z-index: 1; } .sidebar ul { list-style-type: none; padding-left: 0; position: fixed; } .normal { font-size: 13px; background: gray; color: white; text-transform: uppercase; width: 80px; } .active { width: 140px; background-color:orange; font-size: 25px; text-transform: uppercase; color: white; } </style> </head> <body> <div class="sidebar"> <ul> <li id="pop" class="normal">Home</li> <li class="normal">Programs</li> <li class="normal">Replay</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(window).on("scroll",function() { if($(this).scrollTop() > 500) $("#pop").removeClass("normal").addClass("active"); else $("#pop").removeClass("active").addClass("normal"); }) }) </script> </body> </html>

Answer 2

使用您的CSS更具體：

<style>
  div.sidebar li.active {
  width: 140px;
  background: orange;
  font-size: 25px;
  }
</style>

https://jsfiddle.net/o266wh3r/1/

滾動事件上的jQuery .addClass（）不起作用

問題描述

2 個解決方案

解決方案1
1 已采納 2016-09-05 19:58:47

解決方案2
-1 2016-09-05 19:34:46

滾動事件上的jQuery .addClass（）不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2016-09-05 19:58:47

解決方案2 -1 2016-09-05 19:34:46

解決方案1
1 已采納 2016-09-05 19:58:47

解決方案2
-1 2016-09-05 19:34:46