sticky header transition is not smooth

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>

score 3 · Accepted Answer · answered Oct 27 '16 at 07:24

3

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/

answered Oct 27 '16 at 07:24

XYZ

4,450
2
15
31

Thanks XYZ, can you please make me understand how to fix this? i cannot understand the fix. – VIKAS HATWAL Oct 27 '16 at 07:38
height: 150px; This is the style you have give for the bigger image and for smaller img height: auto; width: 125px; .so specify the width of the bigger image and then it will show the transition – XYZ Oct 27 '16 at 08:18
1

Transitions can only animate across numerical values, so you'll have to give your ending and starting transition measurements.so width auto or height auto does not work.http://stackoverflow.com/a/7861781/7011496 – XYZ Oct 27 '16 at 08:25

sticky header transition is not smooth

1 Answers1