Liaoyi

外观

本页目录

粘性定位吸顶效果 Sticky Header ​

Header 默认显示在页面中，滑到某个位置时 sticky ​

html
<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>
css
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;
}
js
const sticky = document.querySelector('.sticky')
const origOffsetY = sticky.offsetTop

const onScroll = () => sticky.classList.toggle('fixed', window.scrollY >= origOffsetY)

document.addEventListener('scroll', onScroll)

Header默认不显示, 滑到某个位置时显示并 sticky ​

html
<div class="wrap"></div>
<div class="pin">hello</div>
css
* {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh + 100px);
  background-color: pink;
}
.pin {
  width: 100%;
  height: 50px;
  position: fixed;
  top: -50px;
  left: 0;
  transition: 0.3s all;
  transform: translateZ(0);
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
}
.pin.show {
  top: 0;
  visibility: visible;
}
js
const pin = document.querySelector('.pin')

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

window.addEventListener('scroll', onScroll)

参考资料