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(){
//
});

块。我的意思是，滚动事件与导航栏调整大小功能的绑定。

作为旁注，jQuery允许您编写上面的块（具有相同的功能）和

$(function() {
//
});

JavaScript无法在IE和Firefox中运行，在Chrome中运行良好

1 个答案: