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");


    })
})

最终代码：

＆＃13;

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

＆＃13;

Answer 2

更具体地说明你的css：

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

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

滚动事件上的jQuery .addClass（）不起作用

2 个答案: