javascript - jQuery或JS，让元素在底部离开屏幕并在顶部进入

Question

我一直在寻找解决方案，但找不到任何类似的解决方案。正如标题所说，我将导航绝对定位在屏幕的最底部，但是当用户到达底部时，我希望导航“向下滑动”并显示在顶部。

我的逻辑是查看用户得到的屏幕高度，这样我就可以只为一个 css 属性设置动画。

这是我写的不起作用的代码

if ( (topDistance-10) < scrollTop ) {
        //Navigation control
        var navHeight = $(window).height();
        $(".navigation").animate({bottom: -64},600).delay(1000).css('bottom' , navHeight).delay( 3500 ).animate({bottom: navHeight - 64},600);

    }

HTML:

<ul class="navigation stickBottom">
    <li data-slide="1"><a href="">home</a></li>
    <li data-slide="2"><a href="">truth</a></li>
    <li data-slide="3"><a href="">about</a></li>
    <li data-slide="4"><a href="">contact</a></li>
</ul>

CSS:

.navigation {
position: fixed;
z-index: 3;
bottom: 0;
width: 100%;
left: 0;
padding: 15px 0 15px 20px;
background-color: rgba(0, 0, 0, 0.75);

}

.navigation li{
    color:#fff;
    display: inline-block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:bold;
    -webkit-transition: all .2s ease-in-out;
    text-align:left;
    font-size:26px;
}

Answer 1

尝试这样使用

var body = $("html, body");
body.animate({scrollTop:0}, '500', 'swing', function() { 
   alert("Finished animating");
});

查看此示例 http://jsfiddle.net/hellosze/MMgXu/