粘性标头过渡不顺利

Question

I have created a sticky header. In which i am resizing the logo image also. This is working fine. I just want to smothness when the logo image gets resized to smaller and bigger size.

Can i get any help in this.

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; }

Give a width to your image and give height to your smaller image

 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/