javascript - Nav show on scroll up -

i copied script website, , i'm not sure i'm doing wrong here. script suppose remove / add class, reason not working.

i tested on url, , here working http://rubenkoops.nl/script_library/cms/content/01-home/nav_hide_on_scroll_html_preview/

for reason nog working on url http://18493.hosts.ma-cloud.nl/

i got feeling i'm missing dumb, can figure out?

<style type="text/css">      header {         background: #f5b335;         height: 40px;         position: fixed;         top: 0;         left: 0;         transition: top 0.2s ease-in-out;         width: 100%;     }      .nav-up {         top: -40px;     }   </style>  <script type='text/javascript'>//<![cdata[     $(function(){     // hide header on on scroll down     var didscroll;     var lastscrolltop = 0;     var delta = 5;     var navbarheight = $('header').outerheight();      $(window).scroll(function(event){         didscroll = true;     });      setinterval(function() {         if (didscroll) {             hasscrolled();             didscroll = false;         }     }, 250);      function hasscrolled() {         var st = $(this).scrolltop();          // make sure scroll more delta         if(math.abs(lastscrolltop - st) <= delta)             return;          // if scrolled down , past navbar, add class .nav-up.         // necessary never see "behind" navbar.         if (st > lastscrolltop && st > navbarheight){             // scroll down             $('header').removeclass('nav-down').addclass('nav-up');         } else {             // scroll             if(st + $(window).height() < $(document).height()) {                 $('header').removeclass('nav-up').addclass('nav-down');             }         }          lastscrolltop = st;     }     });//]]>   </script>  <header class="nav-down">     dit het menu </header> 

the problem script expects $("header") element aka:

<header></header> 

but have

<div id="header"></div> 

so logically have 2 solutions.

1. change script $("#header")
2. or use <header> element