Question

我设法得到一个固定菜单，使用以下代码缩小滚动：http://jsfiddle.net/JJ8Jc/913/

但是我希望动画/缩小速度能够逐像素地跟随滚动速度，就像你在WP Enfold主题中看到的那样：http://www.kriesi.at/themes/enfold/所以当用户只向上滚动5个像素时，菜单缩小5像素。当用户向上滚动5个像素时，菜单的高度增加5个像素。

我目前使用的动画代码是否可以实现？或者它需要不同的方法？

Code I目前正在使用：

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

$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
{
    if($('#header_nav').data('size') == 'small')
    {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
    }  
}
});

Answer 1

好吧，通过修改一些jQuery代码，通过滚动来调整div的大小，我能够获得完全相同的固定菜单效果，如Unfold主题中所示。并将最小高度的CSS值添加到#header_nav类。

这是显示实际代码的小提琴链接：http://jsfiddle.net/JJ8Jc/919/

提示重新菜单透明度：如果您想重新创建展开菜单的透明度，只需使用重复的1px * 1px PNG（透明度约为90％-95％） #header_nav背景图片。也可以使用CSS，但这也可以使您的徽标和菜单项透明。

如果有人知道更好的解决方案，我仍然希望听到它：）

jQuery：

$(document).ready(function(){
    $(window).scroll(function() {
        var $myDiv = $('#header_nav');
        var OriginalHeight = '100';
        var st = $(this).scrollTop();
        $myDiv.height( OriginalHeight - st );
    }).scroll();
});

CSS：

body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}

#header_nav {
    width:100%;
    height:100px;
    min-height:40px;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
}
#header_nav img {
    height:100%;
}

#content_wrapper {
    width:100%;
    height:500px;
    padding-top:100px;
}

使用的HTML示例：

<div id="header_nav"><img src="http://www.kriesi.at/themes/wp-content/plugins/avia_cachable_style_switch/images/logo-enfold/splash-orange.png"/></div>
<div id="content_wrapper">Just some content.</div>

JQuery根据滚动速度缩小固定菜单动画速度？

1 个答案: