Jquery .scroll 显示：无；不工作

Question

CSS

#acc-close-all, #to-top {
    position: relative;
    left: 951px;
    width: 29px;
    height: 42px;
    margin-bottom: 2px;
    display:none;
}

#acc-close-all a, #to-top a {
    position: absolute;
    float: right;
    display: block;
    height: 42px;
    width: 29px;
    overflow: hidden;
    display:none;
    cursor: pointer;
}

HTML

<div id="acc-close-all">
    <a title="Close all open tabs"><!----></a>
</div>
<div id="to-top">
    <a title="Back to top"><!----></a>
</div>

jQuery

// Scroll close all and bcak to top buttons with the page
$(window).scroll(function() {
    var top = $(this).scrollTop();
    $('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
});

我希望这些选项卡在用户向下滚动页面时缓慢淡入，并在用户接近顶部时淡出。

我可以让它在没有 display:none 和 display:inline 的情况下工作，但是当用户向下滚动页面时它不会显示。我读过这个http://api.jquery.com/scroll/ 但仍然无法让它工作。

注意：只有在打开手风琴时，该页面才能滚动。是的，任何时候都可以打开多个手风琴。

Answer 1

您没有看到您的链接出现在滚动上的原因是因为它们的父容器（#acc-close-all 和 #to-top）也设置为 display: none，并且从不设置为滚动可见。您可以按如下方式更改 CSS 来解决此问题：

#acc-close-all, #to-top {
    position: relative;
    left: 951px;
    width: 29px;
    height: 42px;
    margin-bottom: 2px;
}

或者，您可以在滚动事件处理程序中将两个父容器都设置为 display: block。

这是a simplified example，它正在运行。