title: Angular hide header on scroll down, show on scroll up
body: <p>I am trying to recreate this fiddle: <a href="http://jsfiddle.net/mariusc23/s6mLJ/31/" rel="noreferrer">http://jsfiddle.net/mariusc23/s6mLJ/31/</a> using AngularJS.</p>
  
  <p>Effectively, when the user scrolls down the page, the <code>header</code> disappears. If, at any point, the user scrolls up, even 1/2px... the <code>header</code> drops down.</p>
  
  <p>I have created a plunker: <a href="http://plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview" rel="noreferrer">http://plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview</a> which seems to apply the <code>hide-header</code> class, but, i cannot seem to get to to appear on scrollUp.</p>
  
  <p>Directive:</p>
  
  <pre><code>app.directive("myDirective", function ($window) {
      return function(scope, element, attrs) {
          angular.element($window).bind("scroll", function() {
  
              var lastScrollTop = 0;
              var delta = 50;
              var windowInnerHeight = $window.innerHeight;
              var windowHeight = $window.height;
  
              var st = this.pageYOffset;
  
              // Make sure they scroll more than delta
              if(Math.abs(lastScrollTop - st) &lt;= delta)
                  return;
  
              // If they scrolled down and are past the navbar, add class .nav-up.
              // This is necessary so you never see what is "behind" the navbar.
              //if (st &gt; lastScrollTop &amp;&amp; st &gt; navbarHeight){
              if (st &gt; lastScrollTop &amp;&amp; st &gt; 50){
                  // Scroll Down
                  //$('header').removeClass('nav-down').addClass('nav-up');
                  console.log("in if...");
                  scope.navUp = true;
              } else {
                  // Scroll Up
                  if(st + windowInnerHeight &lt; windowHeight) {
                      //$('header').removeClass('nav-up').addClass('nav-down');
                      console.log("in else...");
                  }
              }
  
              lastScrollTop = st;
  
              scope.$apply();
          });
      };
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;header my-directive ng-class="{true : 'hide-header'}[navUp]"&gt;
        &lt;ul&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/header&gt;
    &lt;/body&gt;
  </code></pre>