javascript - 主页横幅下方的二级导航

Question

我正在尝试在第一个主页横幅下编写辅助导航，并在滚动时固定 header 。

示例:www.neffassociates.com(请稍微向下滚动)

Answer 1

• 监听窗口滚动事件
• 检查你的导航栏是否在顶部

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

代码笔中的示例:

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');
  }
})