html 快速粘性导航

Posted 2021-05-11

// REF: https://remysharp.com/2017/06/28/sticky-headers  

.sticky-banner {
  position: relative;
  height: 65px;
  width: 100%;
}

.sticky-banner__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color:#F3F7FF;
}

.sticky .sticky-banner__inner {
  position: fixed;
  z-index: 1000;
}

var rafTimer;

function toggleHeaderFloating() {
  if (window.scrollY > 80) {
    document.body.classList.add('sticky');
  } else {
    document.body.classList.remove('sticky');
  }
}

window.onscroll = function (event) {
  cancelAnimationFrame(rafTimer);
  rafTimer = requestAnimationFrame(toggleHeaderFloating);
};

<div class="sticky-banner">
  <div class="sticky-banner__inner">
  <!-- CODE -->
  </div>
</div>