I want to add transitions to sticky header to my store

Question

I want to add transitions to sticky header to my store. I want to stciky header to show from the top when the scroll is > 50. The scrollheader and coverheader classes works fine. But transitions not worked. The header just jumps to above as sticky header is enabled. The logo part is resized in sticky header by almost 80px than normal header. Here is the code of Javascript.

(function enableStickyHeader() {
     var stickyHeader = document.querySelector('header').dataset.sticky;
     var scrollHeader = $("header.scrollheader");

     $(window).scroll(function() {
       var scroll = $(window).scrollTop();
       if (scroll >= 50 && stickyHeader == 'true') {
         scrollHeader.removeClass('scrollheader').addClass("coverheader");
         
       } else {
         scrollHeader.removeClass("coverheader").addClass('scrollheader');
       }
     });
   })();

And through css I am applying css transition property. I have tried to get the results by applying height and line height to headers. But that also not works.

.coverheader {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: fixed;
}
header {
    width: 100%;
    line-height: 50px;
    top: 0;
    z-index: 150;
}
.scrollheader {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

And Html code for the case is this.

<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>

Answer 1

For the effect you give to work, the values ​​on which css is based must change.

I prepared the following example to give you an idea.

Please note: To make it easy to understand, I have slightly extended the animation time. And I made the background black and the header white.

(function enableStickyHeader() {
  var stickyHeader = document.querySelector('header').dataset.sticky;
  var scrollHeader = $("header.scrollheader");

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 82 && stickyHeader == 'true') {
      scrollHeader.removeClass('scrollheader').addClass("coverheader");

    } else {
      scrollHeader.removeClass("coverheader").addClass('scrollheader');
    }
  });
})();

html {
  height: 10000px;
  background: black;
}

html,
body {
  padding: 0;
  margin: 0;
}

.coverheader {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: fixed;
  bottom: 100%;
  transform: translateY(100%);
}

header {
  display: flex;
  width: 100%;
  line-height: 50px;
  z-index: 150;
  background: white;
}

.scrollheader {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  transform: translateY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
  <p>logo and menu is there</p>
</header>