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

HTML

<div id="hid"></div>
<div id="content">Content</div>
<div id="footer">footer</div>

CSS

#hid {
    width: 200px;
    height: 300px;
    background: #FF0000;
    position: fixed;
    right: 0; 
}
#content{
    height: 1200px;
}
#footer{
     height: 300px;
    background: gray;
}
html, body{
     height: 1500px;
}

JavaScript

jQuery(function ($) {
    $(window).scroll(function () {
       $("#hid")[ $("#footer").view() ? "hide": "show"]() ;
    });
});
jQuery.fn.view = function () {
	var elemTop = this.offset().top,
		docViewTop = $(window).scrollTop(),
		elemBottom = elemTop + this.height(),
		docViewBottom = docViewTop + $(window).height();
	return docViewTop < elemTop && docViewBottom > elemBottom;
};