Question

I’m using a scroll to script which changes the display of the element from none to block when a certain point is reached on the page.

Is there any way of applying a fade in as well as changing the display, or even load an animated gif?

Here is my code

window.onscroll = function()
{
if( window.XMLHttpRequest ) {
    if (document.documentElement.scrollTop > 454 || self.pageYOffset > 454) {
    $('logosmall').style.position = 'fixed';
    $('logosmall').style.top = '0';
    $('logosmall').style.padding = '10px';
    $('logosmall').style.display = 'block';
} else if (document.documentElement.scrollTop < 454 || self.pageYOffset < 454) {
        $('logosmall').style.position = 'absolute';
        $('logosmall').style.top = '454px';
        $('logosmall').style.display = 'none';
    }
}

}

Answer 1

You simply chain .fadeIn() or .fadeOut(). When doing so, it’s always a good idea to use .stop(true, true) so you don’t queue animations. I’ve also re-factored your code to be more efficient with respect to the styling:

window.onscroll = function() {

    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 454 || self.pageYOffset > 454) {

            $('logosmall').css({

                'position' : 'fixed',
                'top'      : '0',
                'padding'  : '10px'

            }).stop(true,true).fadeIn('slow');

        } else if (document.documentElement.scrollTop < 454 || self.pageYOffset < 454) {

            $('logosmall').css({

                'position' : 'absolute',
                'top'      : '454px'

            }).stop(true, true).fadeOut(0);

        }
    }
}

P.S. I’m not sure if it’s a typo or not, but is logosmall a class or an id? If it’s a class, you need to preface it with a period: .logosmall. If it’s an id, you need to preface it with a pound sign: #logosmall.