javascript - Make Navigation Bar that Shrinks when Scrolling Begins -

i designing website have navigation bar sticks top of page, gets smaller whenever user scrolls down. example of https://www.endgame.com/. if possible, solely css, if necessary, willing javascript. after research , looking @ endgame's source code, unable figure out how this.

how achieved?

use css transitions , little jquery (4 lines):

$(document).scroll(function() {    if ($(this).scrolltop() > 10) { //adjust 150      $('#head').addclass('shrinked');    } else {      $('#head').removeclass('shrinked');    }  });

body {    height: 9999px;    margin: 0;    background: url(http://webdesignledger.com/wp-content/uploads/2009/09/pattern_places_8.jpg) repeat;/* added sense of scrok=lling */  }  #head {    background-color: red;    height: 100px;    width: 100%;    position: fixed;    top: 0;  }    #head, #head * { transition: 0.3s ease; }    #head.shrinked {    height: 30px;  }    #head.shrinked span {    color: blue;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="head">    <span>my header</span>  </div>

css transitions animate change. when add class changes height, animate that. how works. uses css if wish add new styles, need detect #head.shrinked can add selector. did span change color. can use show different logo when navigation shrinks.

---

the website linked uses method (i've trimmed out stuff).

$(window).on('scroll', function(){    var $this = $(this);   if($this.scrolltop() > 1){     $header.addclass('shrt');   }else{     $header.removeclass('shrt');   }  }); 

it adds shrt class

<header class="cf" role="banner" style="top: 0px;"> 

becomes:

<header class="cf shrt" role="banner" style="top: 0px;"> 

the css uses transitions

transition-delay: 0s, 0s; transition-duration: 1s, 1s; transition-property: top, height; transition-timing-function: ease, ease; 

properties changed are:

max-width: 20px !important; border-top: 5px solid #040407; font-size: 80%; height: 24px; width: 24px; top: 14px;