JavaScript 在 IE 和 Firefox 中不工作，在 Chrome 中工作正常

Question

我的导航栏正在使用(如果有人能顺便帮我把它写得更好的话，我必须说写得不好)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;
}

这是网站:

http://www.onepixelroom.com/droninrenovations/

Answer 1

改变

$('body').scrollTop()

到

$(window).scrollTop()

这通常是检索窗口内容(以及正文)的滚动位置的推荐方法。

另外我建议把所有东西都放在

$(document).ready(function(){
//
});

阻止。我的意思是，还有滚动事件与导航栏调整大小功能的绑定(bind)。

作为旁注，jQuery 允许您编写上面的 block (具有相同的功能)

$(function() {
//
});