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

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

我的逻辑是查看用户得到的屏幕高度，这样我就可以只设置一个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);

    }

试着这样使用

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

---

查看此示例

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

// 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);

---

你能分享代码附带的HTML/CSS示例吗？任务很简单，只要用户到达底部，在底部隐藏导航，在页面顶部显示（如幻灯片向下），我就不明白了。。。因此，您在页面底部有一个导航，一旦用户到达那里，您想隐藏并显示顶部的导航吗。。？你是在试图控制用户还是我遗漏了什么…？哈哈，这是一个很好的观点，但这就是任务，相同的导航在底部消失，然后出现在topSo上，你想要这样的东西吗？谢谢你的帮助，但这不是我要找的，我的导航固定在屏幕底部，当我们到达页面的底部时，我想让导航离开底部的屏幕，从顶部向下，现在固定到顶部。

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

// 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);