为即将到来的导航菜单设置动画

Animating a navigation menu coming in

本文关键字：设置 动画 菜单 导航 即将到来      更新时间：2023-09-26

我有一些用jQuery优化的粘性菜单。我写了一些代码来检测我们所处的高度，在某个值之后，通过固定其位置值来降低导航并使其具有粘性！

这是代码：

$(window).scroll(function () {
            var $locationY = $(window).scrollTop(),
           $defaultY = 385;
           if ( $locationY < $defaultY ){
                $('#nav').removeClass("sticky")
                                        }
                    else {
                        $('#nav').addClass("sticky")
}
     });

问题是我该如何制作动画？为了很好地显示，例如从上到下的幻灯片。我想知道什么是正确的方法来使用幻灯片向下，动画。。。方法。

谢谢。

类似的东西？演示http://jsfiddle.net/yeyene/UZgXB/1/

不确定你的粘性菜单是否在加载时显示。

JQUERY

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $('#nav').stop()
                .addClass('sticky')
                .animate({
                'padding': '1% 2% 1% 2%'
            }, 400, "swing");
        } else {
            $('#nav').stop()
                .removeClass('sticky').addClass('normal')
                .animate({
                'padding': '6% 2% 6% 2%'
            }, 400, "swing");
        }
    });
});

CSS

#nav, .normal {
    float:left;
    margin:0;
    padding:6% 2%;
    width:96%;
    background:red;
}
.sticky {
    position:fixed;
    left:0;
    top:0;
}

我认为transition可以帮助您。

#nav{
     transition:top 2s ease;
}

并使用类似的postion:fixed;和top:xxxpx;定位#nav

.sticky{
     position:fixed;
     top:300px;
}

demo试试看。

我要做的是固定它的位置，它的顶部值等于0减去它的高度。然后将其设置为最高值0。

通过这种方式，它将从顶部滑动，就像facebook的时间线菜单一样。。。粘性类应该具有负的顶部值，JS会在动画中更正它。

$(window).scroll(function () {
        var $locationY = $(window).scrollTop(),
       $defaultY = 385;
       if ( $locationY < $defaultY ){
            $('#nav').removeClass("sticky")
                                    }
                else {
                    $('#nav').addClass("sticky").animate({top:0},400);
      }
});
相关文章：