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

问题描述

我想向我的商店添加到粘性标头的过渡。当滚动> 50时，我想让标题从顶部开始显示。scrollheader和coverheader类工作正常。但是过渡没有用。启用粘性标头后，标头仅跳到上方。徽标部分在粘性标头中的大小比普通标头大了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 Transition属性。我试图通过将高度和行高应用于标题获得结果。但这也行不通。

.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所基于的值。

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

请注意：为了易于理解，我稍微延长了动画时间。然后我将背景设为黑色，标题设为白色。

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