Блок появляется и исчезает при прокруте

HTML

<div id="hid"></div>

CSS

#hid {
    width: 100%;
    height: 50px;
    background: #FF0000;
    opacity: 0;
    position: fixed;
}
body {
    height: 1500px;
}

JavaScript

jQuery(function (f) {
    var el = f("#hid"), display;   
    f(window).scroll(function () {
        display = f(this).scrollTop() >= 200;
        if(display != el.css('opacity'))
            el.stop().animate({'opacity': display}, 500);     
    });
});