title: Resizing Header On Scroll Angular
body: <p>My question is about AngularJS, in response to events (scroll) . I need to change the size of the header on scroll down or resize on scroll up. The code in javascript is next, but I need to implement it in AngularJs:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function init() {
      window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
              shrinkOn = 300,
              header = document.querySelector("header");
          if (distanceY &gt; shrinkOn) {
              classie.add(header,"smaller");
          } else {
              if (classie.has(header,"smaller")) {
                  classie.remove(header,"smaller");
              }
          }
      });
  }
  window.onload = init();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
      width: 100%;
      height: 150px;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      background-color: #0683c9;
      -webkit-transition: height 0.3s;
      -moz-transition: height 0.3s;
      -ms-transition: height 0.3s;
      -o-transition: height 0.3s;
      transition: height 0.3s;
  }
  header h1#logo {
      display: inline-block;
      height: 150px;
      line-height: 150px;
      float: left;
      font-family: "Oswald", sans-serif;
      font-size: 60px;
      color: white;
      font-weight: 400;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
  }
  header nav {
      display: inline-block;
      float: right;
  }
  header nav a {
      line-height: 150px;
      margin-left: 20px;
      color: #9fdbfc;
      font-weight: 700;
      font-size: 18px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
  }
  header nav a:hover {
      color: white;
  }
  header.smaller {
      height: 75px;
  }
  header.smaller h1#logo {
      width: 150px;
      height: 75px;
      line-height: 75px;
      font-size: 30px;
  }
  header.smaller nav a {
      line-height: 75px;
  }
  
  @media all and (max-width: 660px) {
      header h1#logo {
          display: block;
          float: none;
          margin: 0 auto;
          height: 100px;
          line-height: 100px;
          text-align: center;
      }
      header nav {
          display: block;
          float: none;
          height: 50px;
          text-align: center;
          margin: 0 auto;
      }
      header nav a {
          line-height: 50px;
          margin: 0 10px;
      }
      header.smaller {
          height: 75px;
      }
      header.smaller h1#logo {
          height: 40px;
          line-height: 40px;
          font-size: 30px;
      }
      header.smaller nav {
          height: 35px;
      }
      header.smaller nav a {
          line-height: 35px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;div class="container clearfix"&gt;
          &lt;h1 id="logo"&gt;
              LOGO
          &lt;/h1&gt;
          &lt;nav&gt;
              &lt;a href=""&gt;Lorem&lt;/a&gt;
              &lt;a href=""&gt;Ipsum&lt;/a&gt;
              &lt;a href=""&gt;Dolor&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;&lt;!-- /header --&gt;</code></pre>
  </div>
  </div>
  </p>