Question

我创建了一个导航栏，当滚动条动态地改变大小，但是我遇到了一些问题，图像被剪切了，在firefox中顶部导航栏的大小不起作用。

的jQuery

num = $('.topbar').offset().top;
$(window).bind('scroll', function() {
    if ($(window).scrollTop() > num) {
        $('.topbar').stop().animate({height: 34}, 200);
    } else {
        $('.topbar').stop().animate({height: 92}, 200);
    }
});

JSFIDDLE

Answer 1

如果您想要的只是图像不会被切断，但是当您滚动时导航栏会改变大小，那么您就非常接近了。只需将图片标记移出<div>。

即可

num = $('.topbar').offset().top;
$(window).bind('scroll', function() {
    if ($(window).scrollTop() > num) {
        $('.topbar').stop().animate({height: 34}, 200);
    } else {
        $('.topbar').stop().animate({height: 110}, 200);
    }
});

*{
   margin: 0;
   padding: 0;
}

body{
    height: 2000px;
}

.topbar{
    position: fixed;
    background: red;
    height: 110px;
    width: 100%;
    z-index:-1;
}

#img {
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topbar"></div>
<div id="img">
    <img src="http://i.imgur.com/tsiftgN.png" />
</div>

（在Chrome和FF中测试过。）

滚动时导航栏中的错误

1 个答案: