1

我的目标是在向下滚动页面时创建一个缩小的菜单。但是当你将鼠标悬停在它上面时会再次增长。

我已经能够让导航缩小，但我不知道如何让导航再次增长。我想我在某处有语法错误。

如果你能找到一种方法来简化我的代码，请这样做。

这是我的代码：

JS Fiddle 我的悬停尝试（填充滚动效果）

JS Fiddle 工作版滚动效果无悬停

html

<nav> 
 <a href="">Page 1</a>
 <a href="">Page 2</a>
 <a href="">Page 3</a>
 <a href="">Page 4</a>
 <a href="">Page 5</a>
 <a href="">Page 6</a>
 </nav>
<div style="height:2000px;"></div>

JS

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

$('nav').hover(function () {
    $('nav').data('size', 'big');
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size', 'small').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);
            $a.data('size', 'small').stop().animate({
                height: '20px',
                    'line-height': '20px'
            }, 300, false);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size', 'big').stop().animate({
                height: '100px',
                    'line-height': '100px'
            }, 300, false);
            $a.data('size', 'big').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);


        }
    }
});
}),function () {
    $('nav').data('size', 'small');
   var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size', 'small').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);
            $a.data('size', 'small').stop().animate({
                height: '20px',
                    'line-height': '20px'
            }, 300, false);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size', 'big').stop().animate({
                height: '100px',
                    'line-height': '100px'
            }, 300, false);
            $a.data('size', 'big').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);


        }
    }
});


$(window).scroll(function () {
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size', 'small').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);
            $a.data('size', 'small').stop().animate({
                height: '20px',
                    'line-height': '20px'
            }, 300, false);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size', 'big').stop().animate({
                height: '100px',
                    'line-height': '100px'
            }, 300, false);
            $a.data('size', 'big').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);


        }
    }
});

抱歉，如果这是一个非常基本的问题，我对 javascript 和 jQuery 都是新手。

4

1 回答 1

1

演示

$('nav').hover(function () {
    var $nav = $('nav');
    var $a = $('nav > a');
    $nav.data('size', 'big').stop().animate({
        height: '100px',
            'line-height': '100px'
    }, 300, false);
    $a.data('size', 'big').stop().animate({
        height: '40px',
            'line-height': '40px'
    }, 300, false);

},

function () {
    if ($('body').scrollTop() > 0) {
        var $nav = $('nav');
        var $a = $('nav > a');
        $nav.data('size', 'small').stop().animate({
            height: '40px',
                'line-height': '40px'
        }, 300, false);
        $a.data('size', 'small').stop().animate({
            height: '20px',
                'line-height': '20px'
        }, 300, false);
    }
});

更新

更短的代码

演示

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

function change(date_size, nav_size, a_size) {
    var $nav = $('nav');
    var $a = $('nav > a');
    $nav.data('size', date_size).stop().animate({
        height: nav_size,
            'line-height': nav_size
    }, 300, false);
    $a.data('size', date_size).stop().animate({
        height: a_size,
            'line-height': a_size
    }, 300, false);
}

$('nav').hover(function () {
    if ($('body').scrollTop() > 0) {
        change('big', '100px', '40px');
    }
},

function () {
    if ($('body').scrollTop() > 0) {
        change('small', '40px', '20px');
    }
});



$(window).scroll(function () {
    var $nav = $('nav');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            change('small', '40px', '20px');
        }
    } else {
        if ($nav.data('size') == 'small') {
            change('big', '100px', '40px');
        }
    }
});

创建了一个函数

function change(date_size, nav_size, a_size) {
        var $nav = $('nav');
        var $a = $('nav > a');
        $nav.data('size', date_size).stop().animate({
            height: nav_size,
                'line-height': nav_size
        }, 300, false);
        $a.data('size', date_size).stop().animate({
            height: a_size,
                'line-height': a_size
        }, 300, false);
}

缩短你的代码

悬停代码的正确语法

$('nav').hover(function(){},function(){});

当悬停big功能起作用并mouseout检查if ($('body').scrollTop() > 0)滚动是否比small导航完成时。

于 2013-08-21T02:26:58.727 回答