Question

我为页面创建了一个粘性标头：

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

标题应与this page上的标题相同。

如您在上面的代码示例中所看到的，标头的过渡不平滑，这有点笨拙。

我如何使其顺滑粘住？

Answer 1

您可以尝试使用CSS position:sticky;代替position:fixed

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

使用CSS创建平滑的粘性标头过渡

1 个答案: