jQuery或JS，使元素离开屏幕底部并在顶部输入

jQuery or JS, make element leave the screen on bottom and enter on top

本文关键字：底部 顶部 输入 屏幕 离开 JS 元素 jQuery      更新时间：2023-09-26

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

我的逻辑是查看用户获得的屏幕高度，这样我就只能动画化一个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;
}

试着像这样使用

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

参见此示例http://jsfiddle.net/hellosze/MMgXu/

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

// 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);
相关文章：