Question

I have a div with position: absolute inside a relatively positioned parent. I’d like to keep that div positioned on the bottom of it’s parent during the .scroll() event.

What I’m exactly tried to do here, is when the scrolling starts, fadeOut() the div then when the scrolling ends fade it in.

My attempt is this:

clearTimeout(scroll);
$(Writer).fadeOut('fast');

var scroll = setTimeout(function () {
    $(Writer).css({
        'bottom': 0
    }).fadeIn('slow');
}, 1000);
});

Of course this fails miserably.
Ideas? Thanks.

Answer 1

Try this:

var timer = -1;
$(window).scroll(function () {
    clearTimeout(timer);
    $(Writer).hide(); // hide instead of fadeOut, as otherwise your users will see your div fading out while scrolling
    timer = setTimeout(function() { $(Writer).fadeIn('slow'); }, 1000);
});

UPDATE

Check this fiddle for a demo: http://jsfiddle.net/c3z39/ – The demo uses position: fixed for the div to demonstrate the concept.