hide div on scroll down event wordpress

2 Views

i am trying to hide #header on scroll down event and then reappear on page scroll up.

page link :- http://elementsmart.com/product-category/jewellery/

Read More

the javascript code i used 

<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;
}

when someone scrolls primary need the header to hide.

tried on jsfiddle seems to be working perfect but on page its now showing .

can someone guide ?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Almost done, change

    $('#primary').scroll(function(){

    to 

    $(window).scroll(function(){

    Also wrap your code with

    $(function(){
    //your code here
});