Jquery .scroll display: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");
});

I would like these tabs to fadeIn slowly when the user scrolls down the page and fade up when the user is near the top.

I can get it to work without the display:none and display:inline but it just doesn't show up when the user scrolls down the page. I've read this http://api.jquery.com/scroll/ but still can't get it to work.

NB: The page is only scrollable when the accordion is opened. Yes more than one accordion can be opened at any one time.

Answer 1

The reason you're not seeing your links appear onscroll is because their parent containers ( #acc-close-all and #to-top ) are also set to display: none and never set visible on scroll. You can change the CSS as follows to fix the issue:

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

Alternatively you could set both parent containers to display: block in your scroll event handler.

Here's a simplified example with it working.