Javascript 我想将过渡添加到我的商店的粘性标题

我想将过渡添加到我的商店的粘性标题。我想在滚动>50时从顶部显示标题。scrollheader和coverheader类工作正常。但这种转变并不奏效。当启用粘性标题时，标题仅跳到上方。在sticky标头中，徽标部分的大小比正常标头调整了近80px。 下面是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');
       }
     });
   })();

通过css，我应用css转换属性。我试图通过对标题应用高度和线条高度来获得结果。但这也不起作用

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

本案例的Html代码如下

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

标志和菜单在那里

对于您赋予工作的效果，值​​css的基础必须改变

我准备了以下示例来给您一个想法。

请注意：为了便于理解，我稍微延长了动画时间。我把背景变成了黑色，标题变成了白色

（函数enableStickyHeader（）{
var stickyHeader=document.querySelector（'header'）.dataset.sticky；
var scrollHeader=$（“header.scrollHeader”）；
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=82&&stickyHeader=='true'）{
scrollHeader.removeClass（'scrollHeader'）.addClass（“coverheader”）；
}否则{
scrollHeader.removeClass（“coverheader”）.addClass（“scrollHeader”）；
}
});
})();
html{
高度：10000px；
背景：黑色；
}
html，
身体{
填充：0；
保证金：0；
}
.盖头{
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
过渡：均为0.5s；
位置：固定；
底部：100%；
转化：translateY（100%）；
}
标题{
显示器：flex；
宽度：100%；
线高：50px；
z指数：150；
背景：白色；
}
.scrollheader{
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
过渡：均为0.5s；
位置：相对位置；
变换：translateY（0）；
}

标志和菜单在那里