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

Question

我想在我的商店中添加到粘性 header 的过渡。当滚动条大于 50 时，我希望 stciky header 从顶部显示。滚动条header 和 coverheader 类工作正常。但是过渡不起作用。 header 只是跳到上面，因为启用了粘性 header。徽标部分在粘性 header 中比正常 header 调整了近 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 转换属性。我试图通过将高度和行高应用于 headers 来获得结果。但这也行不通。

.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所依据的数值必须改变。

我准备了下面的例子给你一个想法。

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

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

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

I want to add transitions to sticky header to my store

javascript

css

css-animations

css-transitions

css-transforms