http://presentation.creative-tim.com/과 같은 navbar로 웹 사이트를 만들려고합니다. 사용자가 페이지를 아래로 스크롤하면 navbar가 투명에서 색상으로 변경됩니다.IE에서 작동하지 않는 jQuery 애니메이션 배경색
부트 스트랩과 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
을 추가하는 것이 도움이 될 수 있다고 읽었지만 여전히 작동하지 않습니다. 크롬과 파이어 폭스에서 잘 작동합니다. 그러나 IE에서는 navbar가 투명하게 유지됩니다. 나는 Google에서 답을 찾을 수 없다. 누구든지 그것을 고칠 방법을 알고 있습니까?
어떤 IE 버전을 사용하고 있습니까? – tektiv
IE 11 (win 7)에서 테스트 중입니다. 오늘 저녁에 끝내려고합니다. –