title: Nativescript hide toolbar on list scroll - Keep tabs
body: <p>I am creating a Nativescript application (<a href="https://www.npmjs.com/package/nativescript-angular" rel="nofollow noreferrer">nativescript-angular</a> <code>v7.2.2</code>) with Angular (<code>v7.2.10</code>). I am trying to create a native parallax animation to hide the toolbar when scrolling down and show it again when scrolling up. </p>
  
  <p>To better explain what I want, below is the behavior described by Material design: 
  <a href="https://i.stack.imgur.com/DNh7Q.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DNh7Q.gif" alt="Material scroll"></a></p>
  
  <hr>
  
  <p><strong>Default behavior</strong></p>
  
  <p>By default Nativescript <a href="https://github.com/NativeScript/NativeScript/issues/4908" rel="nofollow noreferrer">does not implement such animations</a>. It is just a static toolbar and tabs (<a href="https://play.nativescript.org/?template=play-ng&amp;id=tJuOve" rel="nofollow noreferrer">see this example</a>). </p>
  
  <hr>
  
  <p><strong>What I want</strong></p>
  
  <p>That brings me to what I want to achieve, is there a way in Typescript to implement the effect above? I know of a one NativeScript parallax library, <a href="https://github.com/JoshDSommer/nativescript-parallax" rel="nofollow noreferrer">nativescript-parallax</a>, but I don't really understand how this fixes my problem or how I should implement it. </p>
  
  <p>There is also the <a href="https://play.nativescript.org/?template=play-ng&amp;id=b9hyJh&amp;v=2" rel="nofollow noreferrer">custom implementation</a>, but that doesn't make much sense to me. What is the best way I could update my example and implement such behavior? Since I don't think NativeScript is going to support it anytime soon.  </p>