javascript - 动画导航菜单进来

Question

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

这是代码：

$(window).scroll(function () {
            var $locationY = $(window).scrollTop(),
           $defaultY = 385;

           if ( $locationY < $defaultY ){
                $('#nav').removeClass("sticky")
                                        }
                    else {
                        $('#nav').addClass("sticky")
}
     });

问题是我如何制作动画？例如从上到下的幻灯片很好地显示出来。我想知道在这种情况下使用 slideDown、animate 等方法的正确方法是什么。

谢谢。

Answer 1

我想transition可以帮助你。

#nav{
     transition:top 2s ease;
}

并定位#nav使用postion:fixed;和top:xxxpx;喜欢

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

试一试。

Answer 2

像这样的东西？演示http://jsfiddle.net/yeyene/UZgXB/1/

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

查询

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

Answer 3

我要做的是固定它的位置，它的最大值等于 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);
      }
});