javascript - 使用 CSS 创建平滑的粘性标题过渡

Question

我为我的页面创建了一个粘性 header :

$(document).ready(() => {
  initNavbarScroll();
});

function initNavbarScroll() {
  const navbar = $("#navbar");
  const navbarTopOffset = navbar.offset().top;
  const stickedCls = "navbarSticked";

  $(window).scroll(() => {
    const isSticked = navbar.hasClass(stickedCls);
    const windowScrolledDown = $(window).scrollTop() > navbarTopOffset;

    if (windowScrolledDown) {
      if (!isSticked) {
        navbar.addClass(stickedCls);
      }
    } else {
      if (isSticked) {
        navbar.removeClass(stickedCls);
      }
    }
  });
}

body {
  margin: 0;
}

#navbar {
  height: 60px;
  width: 100%;
  background: blue;
}

.navbarSticked {
  position: fixed;
  top: 0;
}

.box {
  height: 100px;
  border-bottom: 1px solid;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="navbar"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

header 应与 this page 上的相同.

正如您在上面的代码示例中看到的，标题的转换并不平滑，有点笨拙。

怎样才能让它粘的顺滑？

Answer 1

您可以尝试使用 css position:sticky; 而不是 position:fixed

https://css-tricks.com/position-sticky-2/