Fade In/Out Header on Scroll

HTML

<div id="Header">
    <table>
        <tr>
            <th>H E A D E R</th>
        </tr>
    </table>
</div>
<div id="Body">
    
</div>

CSS

html, body { height: 100%; margin: 0; padding: 0; width: 100%; }
#Header { background: #01fa10; height: 100px; left: 0; position: fixed; top: 0; width: 100%; display:none;}
#Header table { height: 100%; width: 100%; }
#Body { background: #af10fa; height: 200%; }

JavaScript

$(window).on("scroll", function(e) {
	if ($(window).scrollTop() >= $("#Header").height()) $("#Header").fadeIn(500);
	else $("#Header").fadeOut(500);
});