![](/img/trans.png)
[英]JavaScript UTC to localtime conversion not working in IE & Firefox, but works fine for Chrome
[英]JavaScript not working in IE and Firefox, works fine in Chrome
我的导航栏正在使用(写得不好我必须说如果有人可以帮我把它写得更好的话)JavaScript代码让它在向下滚动时减小尺寸。
它在Chrome中运行良好,但在Firefox和IE中无法激活。
我怀疑这是因为CSS文件中设置了高度,但是我必须在CSS中设置它以使其看起来正确。 虽然我很可能是错的。
这是JS:
<script type="text/javascript">
$(document).ready(function(){
$('#nav-background').data('size','big');
});
$(window).scroll(function(){
var $nav = $('#nav-background');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 200);
$("#nav").animate({margin: "17px 0px 0px 0px"}, 200);
$(".smoothScroll").animate({margin: "17px 0px 0px 0px"}, 200);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'80px'
}, 200);
$("#nav").animate({margin: "27px 0px 0px 0px"}, 200);
$(".smoothScroll").animate({margin: "27px 0px 0px 0px"}, 200);
}
}
});
</script>
这是CSS:
#nav-background {
position: fixed;
width: 100%;
background-color: #FFFFFF;
z-index: 1000;
height:80px;
}
#nav-bar {
margin: 0 auto;
width: 90%;
height:100%;
max-width:1070px;
}
.smoothScroll {
text-decoration: none;
color: inherit;
position: relative;
text-align: left;
width:auto;
float:left;
margin-top:27px;
}
.logo-thin {
font-weight: 300;
color: #5B5B5B;
font-family: 'Ubuntu', sans-serif;
font-size: 22px;
}
.logo-bold {
font-family: 'Ubuntu', sans-serif;
font-size: 22px;
color: #535353;
font-weight: 500;
}
.logo-thin:hover {
cursor: url(../img/cursor-black.png) 20 20, move;
}
.logo-bold:hover {
cursor: url(../img/cursor-black.png) 20 20, move;
}
#nav {
list-style-type: none;
width: auto;
float: right;
position: relative;
color: #5B5B5B;
margin-top:27px;
}
#nav .current a {
color: #49E2D6;
}
#nav a:hover {
color:#49E2D6;
cursor: url(../img/cursor-black.png) 20 20, move;
}
#nav li {
float: left;
position:relative;
top:7px;
}
#nav a {
text-transform: uppercase;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
color: inherit;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.nav-seperator {
position:relative;
top:-4px;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
}
这是网站:
更改
$('body').scrollTop()
至
$(window).scrollTop()
这通常是检索窗口内容的滚动位置(以及身体也是如此)的推荐方式。
我还建议将所有内容都放在里面
$(document).ready(function(){
//
});
块。 我的意思是,还将scroll事件绑定到navbar resize函数。
作为旁注,jQuery允许您编写上面的块(具有相同的功能)
$(function() {
//
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.