title: jquery.fullPage.js how to enable hide your header on scroll
body: <p>My question involves fullpage.js responding to (window).scroll events.
  I need hide the header on scroll down and show on scroll up. The header cannot worked well once I apply jquery.fullPage.min.js. </p>
  
  <blockquote>
    <p>Coding for Hide header on scroll down, show on scroll up</p>
  </blockquote>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(function () {
  
              // Hide Header on on scroll down
              var Checkscroll;
              var LastcrollScroll = 0;
              var delta = 5;
              var menuHeight = $('header').outerHeight();
  
  
              $(window).scroll(function (event) {
                  Checkscroll = true;
              });
  
  
              setInterval(function () {
                  if (Checkscroll) {
  
                      hasScrolled();
                      Checkscroll = false;
                  }
              }, 250);
  
              function hasScrolled() {
  
                  var scroll = $(this).scrollTop();
  
                  if (Math.abs(LastcrollScroll - scroll) &lt;= delta)
                      return;
  
                  if (scroll &gt; LastcrollScroll &amp;&amp; scroll &gt; menuHeight) {
                      // Scroll to Down 
                      $('header').removeClass('navbar-header').addClass('nav-up');
                  } else {
                      // Scroll to Up
                      if (scroll + $(window).height() &lt; $(document).height()) {
                          $('header').removeClass('nav-up').addClass('navbar-header');
                      }
                  }
                  LastcrollScroll = scroll;
              }
          });
   &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>Coding for anchors full page </p>
  </blockquote>
  
  <p><code>&lt;script type="text/javascript" src="Scripts/jquery.fullPage.min.js"&gt;&lt;/script&gt;</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
          $('#fullpage').fullpage({
              sectionsColor: ['black', 'black', 'black', 'black'],
              anchors: ['Mainland', '2ndPage', '3rdPage', '4thpage'],
              menu: '#menu',
              css3: true,
              scrollingSpeed: 1000
          });
  </code></pre>
  
  <p></p>