title: Best method of apply a transition to a fixed header on scroll
body: <p>Let's say I have a header that is 100px in height. When the user scrolls down, I want to change how the header looks and make it 50px in height.</p>
  
  <p>Would it make more sense to style both header and display the main header by default and then use JavaScript to hide the main header and show the hidden (smaller header) when the user scrolls?</p>
  
  <p>This seems like a really elaborate process which is why I'm not sure if there is an easier/more efficient way to do this.</p>