Question

我正在尝试使用这样的导航栏创建一个网站http://presentation.creative-tim.com/。当用户向下滚动页面时，我希望导航栏从透明变为颜色。

我正在使用Bootstrap和jQuery。我知道jQuery无法为背景颜色设置动画。所以我使用的是jQuery颜色插件。这是我的剧本：

   $(document).ready(function() { 
 $(window).scroll(function(){
    if ($(window).scrollTop() > 75){
        $('.navbar').stop().animate({'background-color': 'rgba(0, 128, 128, 1)'},400);
    }
    else if ($(window).scrollTop() < 75){
        $('.navbar').stop().animate({'background-color': 'rgba(0, 128, 128, 0)'},400);
    }
});   
});

这是我的HTML：

<!DOCTYPE html>
<html lang="en">

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>test</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>

<body>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- color animations-->
  <script type="text/javascript" src="js/color2.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>

  <nav class="navbar navbar-default navbar-fixed-top" style="background-color : rgba(0, 128, 128, 0); ">
    <div class="container">
      <a class="navbar-brand" href="#" >Brand</a>
      <ul class="nav navbar-nav navbar-right">
        <li><a class="white" href="#">Blog</a>
        </li>
        <li><a class="white" href="#">Over ons</a>
        </li>
        <li><a class="white" href="#">Contact</a>
        </li>
      </ul>


    </div>
  </nav>
</body>

</html>

我现在坚持这个问题几天了。我在这个网站上看到添加$(document).ready可能有所帮助，但它仍然不起作用。它在Chrome和Firefox中运行良好。但在IE中，导航栏保持透明。我无法在谷歌上找到答案。有谁知道如何解决它？

Answer 1

我明白了。这是一个愚蠢的错误！ IE 11限制了我的JavaScript的执行。

jQuery动画背景颜色在IE中不起作用

1 个答案: