Hide an element when a certain amount of scrolling has occured

Question

I'd just like to hide an element on my page, after N number of pixels have been scrolled.

$(window).scroll(function(){
  if($(document).scrollTop() > 200){
    $('.fixedelement').css({'display': 'none'});
  }
});

I thought this might work, and after 200px of scrolling the .fixedelement would vanish. Alas, it doesn't work. Any thoughts?

Answer 1

Try this.

$(window).scroll(function(){
  if($(document).scrollTop() > 200){//Here 200 may be not be exactly 200px
    $('.fixedelement').hide();
  }
});

Answer 2

It seems to work fine here: http://jsfiddle.net/maniator/yDVXY/

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) { //use `this`, not `document`
        $('.fixedelement').css({
            'display': 'none'
        });
    }
});