我正在尝试制作一个带有导航栏的网站 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 中，导航栏保持透明。我无法在谷歌上找到答案。有谁知道如何修复它？
最佳答案
我想通了。这是一个愚蠢的错误! IE 11 限制了我的 JavaScript 的执行。
关于javascript - jQuery 动画背景颜色在 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37732705/