jquery - 您如何在轻松的同时使 Logo 滑入和滑出页面？

Question

我已经研究了一段时间了，但恐怕没有成功。

This网站几乎有一个非常酷的 Logo 滑动，尤其是在页脚中。

当您向下滚动时，标题 Logo 会向上滑动，当您点击页面底部时， Logo 会向上滑动并缓入/缓出。

我检查了元素，只发现了这个相关的 CSS:

#wrap .logo-alt {
    position:absolute;
    margin-top:0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
#wrap .logo-alt.gone {
    position:absolute;
    margin-top:200px;
    pointer-events:none;
}

它还有:

data-scrollspeed="600" and a data-scrollpos="0"

我想 jQuery 也会在那里，但效果究竟是如何工作的呢？上面的标签指的是什么？我以前没有遇到过这种情况。

Answer 1

这个很酷的动画处理 jQuery 代码:

$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() <= ###){
        } else {
        }
    });
});

我创建了这个 codepen为您演示此功能。

基本上浏览器上的位置会触发动画(在这种情况下，我只是向对象添加和删除类)。