Javascript jquery脚本未在Firefox中执行

我使用的脚本可以在向下滚动页面时最小化顶部菜单。该脚本在Chrome和Safari中运行良好，但在Firefox中不会最小化

页面如下：

这是我的剧本：

$(function(){
        $('#menubar').data('size','big');
    });

    $(window).scroll(function(){
        var $nav = $('#menubar');
        if ($('body').scrollTop() > 10) {
            if ($nav.data('size') == 'big') {
                $nav.data('size','small').stop().animate({
                    height:'50px',
                    top:'0px'
                }, 600);
            }
        } else {
            if ($nav.data('size') == 'small') {
                $nav.data('size','big').stop().animate({
                    height:'150px',
                    top:'20px'
                }, 600);
            }  
        }
    });

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

    $(window).scroll(function(){
        var $nav = $('.smedjanlogo');
        if ($('body').scrollTop() > 10) {
            if ($nav.data('size') == 'big') {
                $nav.data('size','small').stop().animate({
                    height:'50px'
                }, 600);
            }
        } else {
            if ($nav.data('size') == 'small') {
                $nav.data('size','big').stop().animate({
                    height:'auto'
                }, 600);
            }  
        }
    });

试一试

改变

if ($('body').scrollTop() > 10) {

到

或

---

Firefox将

overflow

放置到html中，而不是

body

标记

---

所以使用

$（'body，html'）.scrollTop（）

，它将在chrome、Firefox上运行。

这是Firefox的问题。不要使用$（'body'）.scrollTop（）获取滚动位置

Firefox作为基于webkit的浏览器，具有html级别的溢出，而不是正文级别的溢出

你可以用

$('body, html').scrollTop() > 10

---

在试图解决您的问题时，我忍不住注意到一些事实-

您没有在

$（document）.ready（）中初始化代码。您正在外部使用它们，因此有时可能会在使用jQuery之前不加载它-

FireFox不能与@Tushar提到的

body

一起使用

在firefox中，滚动时会触发多个事件，因此不会检查滚动动画是否发生

所以我冒昧地优化了一下你的代码-

$(function(){
    var scrolling = false;
    $('#menubar').data('size','big');
    $('.smedjanlogo').data('size','big');
    $(window).scroll(function(){
        if(!scrolling){
            scrolling = true;
            var $nav = $('#menubar');
            if ($(document).scrollTop() > 10) {
                if ($nav.data('size') == 'big') {
                    $nav.data('size','small').stop().animate({
                        height:'50px',
                        top:'0px'
                    }, 600);
                }
            } else {
                if ($nav.data('size') == 'small') {
                    $nav.data('size','big').stop().animate({
                        height:'150px',
                        top:'20px'
                    }, 600);
                }  
            }

            $nav = $('.smedjanlogo');
            if ($(document).scrollTop() > 10) {
                if ($nav.data('size') == 'big') {
                    $nav.data('size','small').stop().animate({
                        height:'50px'
                    }, 600, null);
                }
            } else {
                if ($nav.data('size') == 'small') {
                    $nav.data('size','big').stop().animate({
                       height:'auto'
                    }, 600, null);
                }  
            }

            setTimeout(function(){
                 scrolling = false;
                 $(window).scroll();            
            },600);
        }
    });
});

---

这是我在FirefoxJavaScript控制台中测试时使用的版本。希望这能有所帮助。

你能解释一下什么部分不起作用吗？@TusharGupta我想OP解释得很好：“……在Firefox中，它不会最小化。”你能发布一个，而不是你的网站吗？@webeno是的，在窗口滚动上没有最小化。这个语句“if（$（'body'）.scrollTop（）>10”改为“if（$（window.scrollTop（）>10）”明白了！这把它修好了。谢谢它与此优化配合得很好。为了安全起见，我会坚持这一条。谢谢！

$('body, html').scrollTop() > 10

$(function(){
    var scrolling = false;
    $('#menubar').data('size','big');
    $('.smedjanlogo').data('size','big');
    $(window).scroll(function(){
        if(!scrolling){
            scrolling = true;
            var $nav = $('#menubar');
            if ($(document).scrollTop() > 10) {
                if ($nav.data('size') == 'big') {
                    $nav.data('size','small').stop().animate({
                        height:'50px',
                        top:'0px'
                    }, 600);
                }
            } else {
                if ($nav.data('size') == 'small') {
                    $nav.data('size','big').stop().animate({
                        height:'150px',
                        top:'20px'
                    }, 600);
                }  
            }

            $nav = $('.smedjanlogo');
            if ($(document).scrollTop() > 10) {
                if ($nav.data('size') == 'big') {
                    $nav.data('size','small').stop().animate({
                        height:'50px'
                    }, 600, null);
                }
            } else {
                if ($nav.data('size') == 'small') {
                    $nav.data('size','big').stop().animate({
                       height:'auto'
                    }, 600, null);
                }  
            }

            setTimeout(function(){
                 scrolling = false;
                 $(window).scroll();            
            },600);
        }
    });
});