Question

我有一个侧栏导航，通过单击由span元素组成的按钮显示 - 它当前是白色的。

这是HTML：

 <div id="sidebar-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
 </div>

跨度的CSS：

div#sidebar-btn span{
        height: 1px;
        background:white;
        margin-bottom: 5px;
        display: block;
    }

这是我创建的另一个类，一旦页面滚动了一定量，使用.toggleClass函数将其变为黑色。这是因为一旦用户滚动并且它具有白色背景，就会有一段内容 - 因此按钮不会显示，因为它也是白色的。

  div#sidebar-btn.black span{
        height: 1px;
        background:black;
        margin-bottom: 5px;
        display: block;
    }

以下是试图切换侧边栏按钮的类的Javascript，以便将课程更改为“黑色”。

  <script>
        $(document).ready(function(){
          $(window).scroll(function() { // check if scroll event happened
            if ($(document).scrollTop() > 50)  {  // check if user scrolled more than 50 from top of the browser window 

                $("#sidebar-btn")(function(){
                    $("#sidebar-btn").toggleClass('black');
                });
             }
          });
        });
    </script>

它无法正常工作。我擅长HTML和CSS但不擅长JavaScript，这里显然有错误。不确定如何解决它。

Answer 1

你的问题是每次scrollTop改变时调用的滚动侦听器，所以当scrollTop超过50时，你开始切换black类。这意味着你在滚动侦听器的每一个回调中都切换了黑色。你应该做的是检查scrollTop是否超过50，然后检查你是否没有类black并添加它，如果scrollTop低于50，你必须检查你的元素是否有类black并将其删除。

完整示例

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50)  {
      if(!$("#sidebar-btn").hasClass('black')){
        $("#sidebar-btn").addClass('black');
      }
    }else{
      if($("#sidebar-btn").hasClass('black')){
        $("#sidebar-btn").removeClass('black');
      }
    }
  });
});

div#sidebar-btn span{
  background: whitesmoke;
  margin-bottom: 5px;
  height: 100px;
  width: 100%;
  display: block;
}

div#sidebar-btn.black span{
  background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar-btn">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

在if语句中尝试省略函数声明并仅使用jQuery的toggleClass（）方法，它应该按照需要工作。

JavaScript - 在向下滚动时尝试更改span元素的颜色

2 个答案:

完整示例