Sticky Header 的两种实现方式

最新推荐文章于 2024-09-02 11:03:50 发布

Lewis_1993

最新推荐文章于 2024-09-02 11:03:50 发布

阅读量4.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Levis_1993/article/details/80702826

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Header 默认显示在页面中，滑到某个位置时 sticky（CodePen预览）

<p style="margin-bottom:100px;">Scroll this page.</p>
<div class="sticky">
  <h3>Super amazing header</h3>
</div>
<p style="margin-top:500px;">Still there?</p>
<p style="margin-top:500px;">Yep!</p>
<p style="margin-top:500px;">Scroll so hard!</p>

body {
  margin: 0;
  text-align: center;
  font-family: sans-serif;
}
.fixed {
  position: fixed;
  top: 0;
}
.sticky {
  width: 100%;
  background: #f6d565;
  padding: 25px 0;
  text-transform: uppercase;
}

const sticky = document.querySelector(".sticky");
const origOffsetY = sticky.offsetTop;

function onScroll() {
  sticky.classList.toggle("fixed", window.scrollY >= origOffsetY);
}

document.addEventListener("scroll", onScroll);

Header 默认不显示，滑到某个位置时显示并 sticky（CodePen预览）

<div class="wrap"></div>
<div class="pin">hello</div>

* {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh + 100px);
  background-color: pink;
}
.pin {
  width: 100%;
  height: 50px;
  position: fixed;
  top: -50px;
  left: 0;
  transition: .3s all;
  transform: translateZ(0);
  background-color: rgba(0, 0, 0, .5);
  visibility: hidden;
}
.pin.show {
  top: 0;
  visibility: visible;
}

const pin = document.querySelector('.pin');

function onScroll() {
  const scrollY = window.scrollY;
  pin.classList.toggle('show', scrollY >= 50);
}

window.addEventListener('scroll', onScroll);