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/

Answer 2

好的，谢谢你的帮助，这就是我需要的东西

// 1. Hide On Bottom
        $(".navigation").animate({bottom: -64},200);

        // 2. Switch to top
        setTimeout(function() {
            $(".navigation").attr('style' , 'bottom:' + navHeight + 'px');
        },300);

        // 3. Show on top
        setTimeout(function() {
            $(".navigation").animate({bottom: navHeight - 64},200);
        },400);

jQuery或JS，make元素将屏幕保留在底部并进入顶部

2 个答案: