JQUERY

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

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

Answer 2

这样的东西？ DEMO 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;
}

Answer 3

我认为transition可以帮到你。

#nav{
     transition:top 2s ease;
}

使用#nav和postion:fixed;

来定位top:xxxpx;

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

demo试一试。

动画导航菜单进来

3 个答案:

JQUERY

CSS