VIKAS HATWAL VIKAS HATWAL - 1 month ago 9
HTML Question

sticky header transition is not smooth

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>

XYZ XYZ
Answer
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/

Comments