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

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

您的问题是每次滚动顶部更改时都会调用滚动监听器，因此当滚动顶部超过 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>