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");
});

我希望这些标签在用户向下滚动页面时缓慢淡入，并在用户靠近顶部时淡出。

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

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

Answer 1

您没有看到链接显示在onscroll上的原因是因为他们的父容器（#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，有效。

Jquery .scroll display：none;不工作

1 个答案: