滚动时jQuery Back-to-Top + StickyFloat + Fade-In

Question

我目前正在使用jQuery Stickyfloat在包含大量内容的网页上显示“返回顶部”按钮。它工作得很好，但是，当用户访问页面时，链接在顶部可见。我希望它在页面加载时隐藏，当用户向下滚动（大约400px）时，它变得可见并启动stickyfloat。当用户向上滚动到页面时，链接就会消失。

jQuery：

$('a#back-to-top').stickyfloat({duration: 150});

HTML：

<div id="content">
   // Content goes here
   <a href="#top" id="back-to-top">Top</a>
</div>

该链接绝对定位于主内容div。 CSS：

#content {
     position: relative;
}

a#back-to-top {
    position: absolute;
    top:0;
    right:0;
}

我该怎么做呢？

Answer 1

您希望最初通过CSS隐藏浮动元素。您可以像平常一样初始化stickyfloat。然后，您希望将处理程序附加到正在滚动的元素的滚动事件（ BODY，DIV .. ）。

在处理程序中，您要检查元素的scrollTop。一旦达到所需的高度，就淡入浮动元素。

反之亦然隐藏它。

.floating-element
{
    display:none
}

$('el').scroll(function(e){
    // check target.scrollTop...
    // fade in target
})