javascript - jquery.scroll显示:none; not working

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/但仍然无法正常工作。

注意:该页面仅在 Accordion 打开时才可滚动。是的，一次可以打开多个 Accordion 。

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与它一起工作。