我想在我的商店中添加到粘性标头的过渡

Question

我想将过渡添加到我的商店的粘性标头。当滚动大于 50 时，我希望 stciky header 从顶部显示。scrollheader 和 coverheader 类工作正常。但是过渡不起作用。标题只是跳到上面，因为启用了粘性标题。徽标部分在粘性标题中比普通标题调整了近 80 像素。这是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>

Answer 1

为了你赋予的效果，css 所依据的值必须改变。我准备了以下示例来给您一个想法。请注意：为了便于理解，我稍微延长了动画时间。我把背景设为黑色，标题设为白色。(function enableStickyHeader() {&nbsp; var stickyHeader = document.querySelector('header').dataset.sticky;&nbsp; var scrollHeader = $("header.scrollheader");&nbsp; $(window).scroll(function() {&nbsp; &nbsp; var scroll = $(window).scrollTop();&nbsp; &nbsp; if (scroll >= 82 && stickyHeader == 'true') {&nbsp; &nbsp; &nbsp; scrollHeader.removeClass('scrollheader').addClass("coverheader");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; scrollHeader.removeClass("coverheader").addClass('scrollheader');&nbsp; &nbsp; }&nbsp; });})();html {&nbsp; height: 10000px;&nbsp; background: black;}html,body {&nbsp; padding: 0;&nbsp; margin: 0;}.coverheader {&nbsp; -webkit-transition: all 0.5s;&nbsp; -moz-transition: all 0.5s;&nbsp; transition: all 0.5s;&nbsp; position: fixed;&nbsp; bottom: 100%;&nbsp; transform: translateY(100%);}header {&nbsp; display: flex;&nbsp; width: 100%;&nbsp; line-height: 50px;&nbsp; z-index: 150;&nbsp; background: white;}.scrollheader {&nbsp; -webkit-transition: all 0.5s;&nbsp; -moz-transition: all 0.5s;&nbsp; transition: all 0.5s;&nbsp; position: relative;&nbsp; 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">&nbsp; <p>logo and menu is there</p></header>