CODEWITHSUNDEEP
javascriptjquerycss
Bryce Johnson
Bryce Johnson

Reputation: 6901

Display element only while user is scrolling, without fading quirk

I want to show a table of contents (for a long web document) as a fixed element on the right side of the page.

I got a 'hello world' of this going fairly easily, but I can't figure out how to keep the element from fading in and out during long scrolls.

Scroll around enough on the fiddle and you'll see what I mean.

js fiddle: http://jsfiddle.net/XGY8H/2/

$(window).scroll(function(){
    var toc = $('.tableOfContents');
    toc.fadeIn();
    setTimeout(function(){
        toc.fadeOut();
    },10000);       
});

Thanks!

Upvotes: 1

Views: 88

Answers (1)

Florent
Florent

Reputation: 12420

You cas use clearTimeout to prevent the ToC from fading out.

$(function () {
    var toc = $('.tableOfContents');
    var fadeTimer;

    toc.fadeOut();
    $(window).scroll(function () {
        toc.fadeIn();

        if (fadeTimer) {
            clearTimeout(fadeTimer);
        }

        fadeTimer = setTimeout(function () {
            fadeTimer = 0;
            toc.fadeOut();
        }, 10000);
    });
});

JSFiddle

Upvotes: 3

Related Questions