Animate div if page is scrolled down

Question

I want to animate my header if the page is scrolled down (lets say 300px).

How can i realize this in jquery?

Something like :

if (scrolled > 300px) {
$('.mydiv').slideUp();
}
else (scrolled < 300px) {
$('.mydiv').slideDown();
 }

thank you!

Answer 1

Try this:

$(document).scroll(function() {
    if( $(this).scrollTop() > 300 ) {
        $('.mydiv').slideUp();
    } else {
        $('.mydiv').slideDown();
    }
});