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>

我希望当用户scrool 400px颜色变为绿色时我尝试跟随但不工作

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

Answer 1

在Javascript中，if语句的评估会在其中一个语句命中后立即结束。这意味着，当您滚动54px后，背景将更改为blue，并且不会检查其他条件，无论它们是否属实，都会被检查。

因此，您需要反转逻辑，以便将最后一个案例放在第一位。试试这个：

＆＃13;

$(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");
    }
  })
})

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: