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

【问题标题】：How to change nav bar multiple color when scrolling jquery滚动jquery时如何更改导航栏的多种颜色
【发布时间】：2017-05-17 09:24:53
【问题描述】：

滚动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");
      }

【问题讨论】：

标签： jquery colors navbar

【解决方案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>

【讨论】：