Streaming live at 10am (PST)

Show element when NOT scrolling

I’m struggling to create a scroll down arrow which appears only when the user is NOT scrolling.

What I’m after is: When the user scrolls, the arrow down disappears. If the user stops scrolling, then the arrow gradually appears.

Does anyone have any tips/tricks or ideas on how to achieve this? I’ve looked into some libraries, but I’m keen to avoid adding unnecessary scripts.

Hi @itsjustanks you can use js to check if window scroll by adding eventlistener on scroll. When false display element. Here is simple how to monitor scroll

Thanks @Stan . I was able to figure this out with something simple as:

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $('.CLASS-TO-TOGGLE').hide();
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        $('.CLASS-TO-TOGGLE').show().fadeIn('fast');
    }, 250));
});

When scrolling, the element containing the class is hidden, when not scrolling, the element with the class is shown.

Happy to see you are not struggle finding how to anymore and have been able write your own code to make it happened.

As issue doesn’t persist feel free to close your request as solved

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.