I've been working on a website and I'm trying to create a navigation bar similar to the one found at . My goal is to have the navbar transition from transparent to a colored background as the user scrolls down the page.
For this project, I am utilizing Bootstrap and jQuery. However, since jQuery cannot animate background-color properties, I have incorporated the jQuery color plugin into my script:
$(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);
}
});
});
Below is the HTML code snippet for the website:
<!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">
<title>test</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/color2.js"></script>
<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>I've been grappling with this issue for a few days now. Despite adding $(document).ready to my script, the desired effect is not functioning properly. The navbar transitions flawlessly in Chrome and Firefox, but remains transparent in Internet Explorer. I've searched online for a solution without success. Does anyone have any insights on how to resolve this?