固定ヘッダーの移行がスムーズでない

Question

固定ヘッダーが作成されました。私はロゴイメージのサイズを変更しています。 これは問題なく動作しています。私は、ロゴイメージが小さくて大きなサイズにリサイズされたときに、くすぶりします。

私はこれに関する助けを得ることができますか？

https://jsfiddle.net/3v7aen3v/

<script> 
    function init() { 
     window.addEventListener('scroll', function(e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 300, 
      header = document.querySelector(".header-top"); 
     if (distanceY > shrinkOn) { 
      classie.add(header, "smaller"); 
     } else { 
      if (classie.has(header, "smaller")) { 
      classie.remove(header, "smaller"); 
      } 
     } 
     }); 
    } 
    window.onload = init(); 
</script> 

<div class="header-top"> 
    <div class="container clearfix"> 

    <img src="http://must-munich.com/wp-content/uploads/Logo_MUST-header-subtitle-2-s.png" id="logo" alt="MUST 2016" /> 

    <nav> 
     <a href="">Lorem</a> 
     <a href="">Ipsum</a> 
     <a href="">Dolor</a> 
    </nav> 
    </div> 
</div> 
<!-- /header --> 
<div style="height:3000px"></div> 

<style> 
div.header-top { 
    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; 
} 

div.header-top img#logo { 
    display: inline-block; 
    height: 150px; 
    /* line-height: 150px;*/ 
    float: left; 
    /* font-family: "Oswald", sans-serif; 
    font-size: 60px; 
    color: white;*/ 
    /* font-weight: 400;*/ 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

div.header-top nav { 
    display: inline-block; 
    float: right; 
} 

div.header-top nav a { 
    line-height: 150px; 
    margin-left: 20px; 
    color: #9fdbfc; 
    font-weight: 700; 
    font-size: 18px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

header nav a:hover { 
    color: white; 
} 

div.header-top.smaller { 
    height: 100px; 
} 

div.header-top.smaller img#logo { 
    font-size: 30px; 
    height: auto; 
    line-height: 75px; 
    width: 125px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

div.header-top.smaller nav a { 
    line-height: 75px; 
} 
</style> 

Answer 1

div.header-top img#logo { 
display: inline-block; 
height: 150px; 
width:200px; 
float: left; 
font-size: 60px; 
color: white; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-ms-transition: all 0.3s; 
-o-transition: all 0.3s; 
transition: all 0.3s; } 

あなたはどのように私は理解してくださいすることができ、あなたのイメージに幅を与え、あなたの小さい画像

div.header-top.smaller img#logo { 
    font-size: 30px; 
    height: 100px; 
line-height: 75px; 
width: 125px; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-ms-transition: all 0.3s; 
-o-transition: all 0.3s; 
transition: all 0.3s; } 

https://jsfiddle.net/bc4p26e4/