javascript - 当用户在浏览器中滚动时隐藏按钮，完成后淡入淡出按钮

Question

我试图在用户滚动时隐藏一个 ID 为#stats 的按钮，然后我希望它在滚动完成后淡入。

出于某种原因，这在下面不起作用。

感谢您的帮助!

<button id="stats">
    <span class="icon prs">&#59146;</span><h3 id="views" class="prm">@file.views</h3>
    <span class="icon prs">&#59160;</span><h3 id="comments">20</h3>       
</button><!--end stats-->


<script>
    //fade stats in on load
    $(function(){  // $(document).ready shorthand
        $('#stats').hide().fadeIn('slow');
    });

    //hide stats when scrolling
    var $stats = $("#stats");
    var opacity = $stats.css("opacity");
    var scrollStopped;

    var fadeInCallback = function () {
        if (typeof scrollStopped != 'undefined') {
            clearInterval(scrollStopped);
        }

        scrollStopped = setTimeout(function () {
            $stats.animate({ opacity: 1 }, "slow");
        }, 200);
    };

    $(window).scroll(function () {
        if (!$stats.is(":animated") && opacity == 1) {
            $stats.animate({ opacity: 0 }, "slow", fadeInCallback);
        } else {
            fadeInCallback.call(this);
        }
    });
</script>

Answer 1

我会尝试稍微简化它，并做一些更像这样的事情:

$(function(){
    var stats = $('#stats'),
        vis   = true;
        timer,


    stats.hide().fadeIn('slow');
    $(window).on('scroll', function() {
        clearTimeout(timer);
        if (vis) {
            stats.stop(true,true).fadeOut('slow');
            vis = false;
        }
        timer = setTimeout(function() {
            stats.stop(true,true).fadeIn('slow');
            vis = true;
        }, 400);
    });
});

FIDDLE