jquery 脚本未在 Firefox 中执行答案

【问题标题】：jquery script not executing in Firefoxjquery 脚本未在 Firefox 中执行
【发布时间】：2014-05-07 12:36:35
【问题描述】：

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

这是页面：http://smedjan.macework.se/boende/

这是我的脚本：

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

【问题讨论】：

你能解释一下哪个部分不工作..
@TusharGupta 我认为 OP 解释得很好：“......在 Firefox 中它不会最小化。”
你能发一个fiddle，而不是你的网站吗？
@webeno 是的，窗口滚动没有最小化。
此语句“if ($('body').scrollTop() > 10)”改为“if ($(window).scrollTop()>10)”

标签： javascript jquery firefox minimize

【解决方案1】：

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

您没有在 $(document).ready() 中初始化代码。你在外面使用它们，所以有时可能会在你使用之前不会加载 jQuery -
如@Tushar 所述，FireFox 无法使用 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);
        }
    });
});

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

【讨论】：

这个优化效果很好。为了安全起见，我会坚持使用这个。非常感谢！

【解决方案2】：

试试

改变

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

到

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

或者

if ($(document).scrollTop() > 10) {

Firefox 将 overflow 放置在 html 中，而不是 body 标记。

所以请使用$('body, html').scrollTop()，它适用于 chrome、Firefox。

【讨论】：

【解决方案3】：

这是火狐的问题。不要使用 $('body').scrollTop() 来获取滚动位置。

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

你可以使用

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

【讨论】：

明白！这完美地解决了它。谢谢！