Question

通过阅读另一篇文章，我可以使用Chrome中的以下代码获得缩小的导航效果：

$(function(){
    $('nav').data('size','big');
    $('.shrink').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('nav');
    var $shrink = $('.shrink');

    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'67px'
            }, 400);
            $shrink.data('size','small').stop().animate({ 
                top: '0'
            }, 400);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'90px'
            }, 400);
            $shrink.data('size','small').stop().animate({ 
                top: '1em'
            }, 400);
        }  
    }
});

但是，我在Firefox中没有得到同样的效果。我该怎么做才能使代码兼容？谢谢！

Answer 1

不确定为什么Firefox没有为scrollTop（）生成值，但是如果我还查看了窗口的scrollY属性，我还是可以运行js。

if ($('body').scrollTop() > 0 || window.scrollY > 0) { ....

向下滚动缩小导航栏，跨浏览器兼容性问题

1 个答案: