2016-06-09 3 views
0

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에서 답을 찾을 수 없다. 누구든지 그것을 고칠 방법을 알고 있습니까?

+0

어떤 IE 버전을 사용하고 있습니까? – tektiv

+0

IE 11 (win 7)에서 테스트 중입니다. 오늘 저녁에 끝내려고합니다. –

답변

0

나는 그것을 알아 냈다. 그것은 바보 같은 실수였다! IE 11은 자바 스크립트의 실행을 제한하고있었습니다.

+0

수정 사항이 있습니까? – Acidic

관련 문제