title: Changing size and content of header at scrolling in browser with CSS
body: <p>Any idea how to make such a thing as seen here <a href="http://studiompls.com/case-studies/crown-maple/" rel="noreferrer">http://studiompls.com/case-studies/crown-maple/</a> </p>
  
  <p>Header goes smaller and logo changes to different button. Can it be done with CSS without writing any JS?</p>
  
  <p>Cheers!</p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>if JS is a must, any link you can recommend to learn? Thanks.</p>