Hiding header on scroll with jquery

Question

I'm trying to have my page not show a header until the user scrolls 600px. I've come up with the code below by parsing through the jquery docs, but I can't seem to make it work. A little help in the right direction would be much appreciated. Thanks!

UPDATE: I've figured it out. I had the selector period before the class name. I'm not seeing the duration transition fire though. $("header").removeClass("header-hidden", 1000); Any advice there?

HTML

 <header class="header-fixed header-hidden shadow">
<section>
  <nav>
    <ul>
      <li>one</li>
          <li>two</li>
        </ul>
  </nav>
</section>
 </header>

CSS

.header-fixed { position: fixed; top: 0; left: 0; width: 100%; }
.header-hidden { display: none;  }
header { z-index: 999; margin: 0; overflow: hidden; height: 70px; background: rgba(255, 255, 255, 0.9); position: relative; }

Jquery

    <script>
      $(window).scroll(function () { 
        if ($(this).scrollTop() < 600) {
          $("header").removeClass("header-hidden", 1000);
        }
                else
                  $("header").addClass("header-hidden", 1000);
      });
    </script>

Answer 1

If you intention is to hide the header until user hits 600px. I would recommend changing your CSS so that header is hidden by default then just do a simple jQuery .show() and .hide() when needed

CSS:

header { 
  background: #ccc; 
  display: none;
  height: 70px; 
  left: 0; 
  margin: 0; 
  overflow: hidden; 
  position: fixed; 
  top: 0; 
  width: 100%;
  z-index: 999; 
}

jQuery:

jQuery(function($) {
  $(window).scroll(function () { 
    if ($(this).scrollTop() < 600) {
      $('header').hide();
    } else {
      $('header').show();
    }
  });
});​

​ jsFiddle

One thing you have wrong is removeClass() does not have a transition argument. Only the class argument without the .