尝试在向下滚动时改变span元素的颜色

JavaScript - trying to change colour of span elements when scrolling down

本文关键字：span 改变 元素 颜色 滚动      更新时间：2023-09-26

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

下面是HTML:

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


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，它试图切换类的侧边栏按钮，使类更改为'black'。

  <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，这里显然有一个错误。不知道该怎么解决

您的问题是每次scrollTop更改时都会调用on滚动侦听器，因此当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>

在if语句中尝试省略函数声明，只使用jQuery的toggleClass()方法，它应该按预期工作

相关文章：