Question

我在使用滚动页面时最小化顶部菜单的脚本。该脚本在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);
            }  
        }
    });

Answer 1

尝试

更改

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

到

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

或者

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

<小时/> Firefox将overflow放置为html而不是body标记。

因此请使用适用于Chrome的Firefox {。{1}}。

Answer 2

这是Firefox的问题。不要使用$（＆＃39; body＆＃39;）。scrollTop（）来获取滚动位置。

Firefox具有html级别的溢出，而不是基于webkit的浏览器的身体级别。

你可以使用

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

Answer 3

在尝试解决问题时，我无法自己注意到一些事实 -

您没有在$(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控制台中测试时使用的版本。希望这会有所帮助。

jquery脚本没有在Firefox中执行

3 个答案: