Smooth CSS animation for sticky menus
01:03 22 Aug 2016

I have a header menu that sticks on top when the user starts scrolling down, and the logo goes up off the screen. The logo on the menu also becomes smaller. This is my CSS code:

$(function() {
  // Check the initial Position of the Sticky Header
  var stickyHeaderTop = $('#logo').offset().top + 160;

  $(window).scroll(function() {
    if ($(window).scrollTop() > stickyHeaderTop) {
      $('#logo').addClass('fixed');
    } else {
      $('#logo').removeClass('fixed');
    }
  });
});
#logo img {
  height: 145px;
  margin: 10px 0 0;
  transition: height 1s ease 0s;
}

.fixed img {
  height: 55px !important;
  position: fixed;
  top: 0;
  z-index: 3;
}

main {
  height: 1000px;
}




  some content

I have an additional jQuery script for adding the class "fixed" to the DIV.

My problem here is that the size change of the logo image is smooth, not so the positioning, because the logo should come down smoothly, and instead, it just appears in place.

What am I missing here?

Thank you.

jquery css sticky