Membuat Header Mengecil Ketika Di Scroll

CSS DIATAS </head>   <style type='text/css'> header1 { width: 100%; height: 150px; overflow: hidden; ...

CSS DIATAS </head>

<style type='text/css'>
  header1 {
   width: 100%;
   height: 150px;
   overflow: hidden;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   background-color: #0683c9;
   -webkit-transition: height 0.3s;
      -moz-transition: height 0.3s;
      -ms-transition: height 0.3s;
      -o-transition: height 0.3s;
      transition: height 0.3s;
  }
  
  header1 h1#logo {
   font-family: "Oswald", sans-serif;
   font-size: 60px;
   font-weight: 400;
   line-height: 150px;
   display: inline-block;
   float: left;
   height: 150px;
    margin: 0;
    padding: 0;
   color: #fff;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
  }
  
  header1 nav1 {
    display: inline-block;
    float: right;
  }
  
  header1 nav1 a {
  line-height: 150px;
  margin-left: 20px;
  color: #9fdbfc;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  }
  
  /* smaller nav1 */
  
  header1 nav1 a:hover {
    color: #ffffff;
  }
  
  header1.smaller {
      height: 75px;
  }
  header1.smaller h1#logo {
      width: 150px;
      height: 75px;
      line-height: 75px;
      font-size: 30px;
  }
  header1.smaller nav1 a {
      line-height: 75px;
  }
  
  
  @media all and (max-width: 660px) {
      header1 h1#logo {
          display: block;
          float: none;
          margin: 0 auto;
          height: 100px;
          line-height: 100px;
          text-align: center;
      }
      header1 nav1 {
          display: block;
          float: none;
          height: 50px;
          text-align: center;
          margin: 0 auto;
      }
      header1 nav1 a {
          line-height: 50px;
          margin: 0 10px;
      }
      header1.smaller {
          height: 75px;
      }
      header1.smaller h1#logo {
          height: 40px;
          line-height: 40px;
          font-size: 30px;
      }
      header1.smaller nav1 {
          height: 35px;
      }
      header1.smaller nav1 a {
          line-height: 35px;
      }
  }
</style>

JAVASCRIP

<script type='text/javascript'>
    function init() {
        window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 200,
            header1 = document.querySelector("header1");
          if ((distanceY) > (shrinkOn)) {
            $(header1).addClass("smaller");
          } else { 
            if ($(header1).hasClass("smaller")) {
              $(header1).removeClass("smaller");
            }
          }
      });
    }
    init();
  </script> 

HTML

<header1 class='site-header1'>
      <div class='container clearfix'>
        <h1 id='logo'>
                LOGO
            </h1>
        <nav1>
          <a href=''>Lorem</a>
          <a href=''>Ipsum</a>
          <a href=''>Dolor</a>
        </nav1>
      </div>
    </header1>

SUMBER : https://mastamvan.blogspot.co.id/2016/09/membuat-header-mengecil-ketika-di-scroll.html