Question

Is it possible to hide an element when you’ve scrolled down a set amount of pixels?

For example a fixed car image scrolling down say 800 pixels viewpoint it fades out, scroll back up if fades up again. Basically so its only visible in a section of the whole page regardless how big the page is?

I cobbled together the below, the site-container being the whole site wrapper of all content and the #plane is the html element i want to hide after you’ve scrolled 800px from the top

    $('#site-container').scroll(function(){
      if($(this).scrollTop() > 800) $('#plane').fadeOut('slow');
      if($(this).scrollTop() < 800) $('#plane').fadeIn('slow');
    }); 

It doesn’t seem to work though, any help would be greatly appreciated.

Answer 1

Change $('#site-container') to $(window).

Even if #site-container is a full-sized container, the actual scrolling bar is applied on the window.

Scrollbars only apply to elements if you set overflow-y: auto; or overflow-y: scroll;.