title: animate header with Angular 5
body: <p>I am getting to grips with angular animations and I am trying to make a header that will animate properly.
  I have been following this tutorial:</p>
  
  <p><a href="https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3" rel="nofollow noreferrer">https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3</a></p>
  
  <p>which is helping me create my header, but I don't want it to do exactly what they are doing, which is why I need some help.
  First of all, when scrolling down the page; I don't want the entire header to vanish. Instead I want it to shrink to around 10px; when I scroll back up I would like it to go to 60px;
  I have changed the animation to this:</p>
  
  <pre><code>trigger('toggle', [
    state(
      VisibilityState.Hidden,
      style({ opacity: 1, height: '10px' })
    ),
    state(
      VisibilityState.Visible,
      style({ opacity: 1, height: '60px' })
    ),
    transition('* =&gt; *', animate('200ms ease-in'))
  ])
  </code></pre>
  
  <p>which works to an extend.
  I have some content inside my template that doesn't shrink when the header does.
  my CSS for the header component looks like this:</p>
  
  <pre><code>:host {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center; // TODO: only for testing, remove later
    background-color: indigo; // TODO: only for testing, remove later
  }
  </code></pre>
  
  <p>and the HTML looks like this:</p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;p&gt;This is the header&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, the first part of this question, is how do I make the content (whatever it is) hide when the menu is compressed? I am sure that is the easy part :)</p>
  
  <p>The second part to this, is I want to add a new event/animation. When you hover over the menu in it's compressed form, I would like it to expand to it's original size (as if you are scrolling up the page). 
  This is hard for me and I would appreciate any help you can give me.</p>
  
  <hr>
  
  <p><strong>* Update *</strong></p>
  
  <p>I managed to get the second part to work.
  I changed my HTML to this:</p>
  
  <pre><code>&lt;div class="header" (mouseenter) ="mouseEnter() "  (mouseleave) ="mouseLeave()"&gt;
    &lt;p&gt;This is the header&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And added a new property and 2 new methods to the component:</p>
  
  <pre><code>private wasVisible = this.isVisible;
  
  mouseEnter() {
    this.wasVisible = this.isVisible === true;
    this.isVisible = true;
  }
  
  mouseLeave() {
    this.isVisible = this.wasVisible === true;
  }
  </code></pre>
  
  <p>So, when I hover of the component, if it is already visible it will stay that way and when I leave, it will reset to whatever it was like before I entered the component.
  If the component was compressed, it will uncompress it and when we move out, it will put it back to being compressed.</p>
  
  <p>Now I just need to figure out how to sort the content.</p>