滚动时如何更改导航栏的多种颜色 jquery

Question

如何在滚动时更改导航栏的多种颜色jquery

 <script>
$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 54) {
        $("#black").css("background" , "blue");
      }


      else{
          $("#black").css("background" , "white");      
      }
  })
})
      </script>

我想当用户滚动 400px 颜色变为绿色时我尝试跟随但不起作用

else if (scroll > 200) {
        $("#black").css("background" , "green");
      }

Answer 1

在 Javascript 中，if 语句的计算在其中一个命中时立即结束。这意味着一旦您滚动到 54px，背景将更改为 blue，并且不会检查其他条件，无论它们是否为真。

所以你需要颠倒逻辑，把最后一个案例放在第一位。试试这个：

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 200) {
      $("#black").css("background-color", "green");
    } else if (scroll > 54) {
      $("#black").css("background-color", "blue");
    } else {
      $("#black").css("background-color", "white");
    }
  })
})

html,
body {
  height: 2000px;
  background-color: #CCC;
}
#black { 
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black"></div>

滚动时如何更改导航栏的多种颜色 jquery

How to change nav bar multiple color when scrolling jquery

jquery

colors

navbar