在Hompage横幅下方的辅助导航

Question

我正在尝试在第一个首页横幅下编写一个具有固定标头的辅助导航，标头固定在滚动条上。

示例在：www.neffassociates.com（请向下滚动）

Answer 1

• 收听窗口滚动事件
• 检查导航栏是否位于顶部边缘

我为你做了一个例子，它将给你一个想法 pen link

codepen的示例：

var navbar = document.querySelector('.navbar').getBoundingClientRect();
var isSticky = false;

window.addEventListener('scroll', function() {
  var s = window.scrollY;
  var navbarCls = 'navbar--fixed';
  var nextEl = document.querySelector('.navbar + *');
  if (s >= navbar.top) {
    nextEl.style.paddingTop = navbar.height + "px";
    document.body.classList.add(navbarCls);
    isSticky = true;
  } else if(s < navbar.top && isSticky) {
    document.body.classList.remove(navbarCls);
    isSticky = false;
    nextEl.removeAttribute('style');
  }
})