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

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() {

  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>