javascript - ワードプレスのスクロールダウンイベントでdivを非表示

Question

スクロール ダウン イベントで #header を非表示にしてから、ページ スクロール アップで再表示しようとしています。

ページリンク:- http://elementsmart.com/product-category/jewellery/

私が使用したJavaScriptコード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"   type="text/javascript">
$('#primary').scroll(function(){
if($(this).scrollTop() > 300) $('#header').fadeOut('slow');
if($(this).scrollTop() < 300) $('#header').fadeIn('slow');
});
</script>

CSS

#header-container { 
position:fixed !important;
margin-left:1.6% !important;
z-index:999 !important;
}

誰かがプライマリをスクロールすると、ヘッダーを非表示にする必要があります。

jsfiddle を試してみましたが、完璧に機能しているように見えますが、ページには現在表示されています。

誰かがガイドできますか？