Question

我希望导航栏可以在某个锚点轻松进出。我已完成任务，但是我发现在动画发生时滚动会因负像素值和文档顶部而中断动画。有没有办法让导航使用我设置的动画而不使用负像素值来隐藏和显示它？

我尝试过使用visibility：hidden;的.show（）/。hide（）选项，但我似乎无法弄清楚如何将它们与.animate（）结合使用。

＆＃13;

var t = $("#about").offset().top;

$(window).scroll(function(){
    if( $(document).scrollTop() >= t ) {
        $('#global-nav').stop().animate({top: '0px'}, 500, 'easeOutBounce');
    } else {
        $('#global-nav').stop().animate({top: '-50px'}, 500, 'easeInExpo');
    }		
});

＆＃13;

html { height: 2000px; } 

#global-nav {
    height:50px;
    background:#000;
    z-index: 9999;
    position: fixed; 
    left: 0; 
    top: -50px; 
    width: 100%;
    color:#fff;
    text-align:center;
    
}
#global-nav p {
    margin-top:15px;
}
#about{
   margin-top:600px;
}

＆＃13;

<div id="global-nav"><p>Navigation</p>.</div>

<div id="about"></div>

＆＃13;

这是我迄今为止所取得的成就：http://jsfiddle.net/Hysteresis/0oazqj4y/43/

非常感谢任何帮助。

Answer 1

实际上你的动画使用了easing效果，因为它看起来犹豫不决但是如果你从隐藏物品中删除了easing效果那么它会让人看起来更加闷闷不乐;例如：

// Without "easeInExpo" easing effect
else {
    $('#global-nav').stop()
    .animate({top: '-50px'}, 500);
}

This looks smooth.

有没有办法在不使用负像素值的情况下轻松进出动画div？

1 个答案: