仅使用原生JavaScript的粘性导航条

Sticky nav bar with native JavaScript only

本文关键字：导航 JavaScript 原生      更新时间：2023-09-26

如何在不使用jQuery的情况下制作一个粘性导航条?

我想这样做:

if (scrollheight == x)
navbar.addclass "sticky"

我最近用EmberJS做了一个sticky侧边栏导航。

无论如何，最后我决定将解决方案提取到香草javascript为基础的笔，因为它似乎粘导航是相当常见的功能。

你可以在这里看到:http://codepen.io/moubi/pen/ALpmwy

Github项目:https://github.com/moubi/sticky-nav

这是我使用的功能的js代码: 

// https://github.com/moubi/sticky-nav
const NAV_OFFSET = 30;
class StickyNav {
  constructor() {
    this.el = null;
    this.anchor = null;
    this.removedScrollClass = '';
    this.events();
  }
  didRender() {
    this.el = document.getElementsByTagName('nav')[0];
    this.anchor = document.getElementsByClassName('nav-anchor')[0];
    this.removedScrollClass = this.el.className;
    this.onResize();
  }
  onResize() {
    var { paddingLeft, paddingRight } = window.getComputedStyle(this.el.parentNode),
      parentWidth = this.el.parentNode.offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
    this.el.style.width = `${parentWidth}px`;
  }
  onScroll() {
    var scroll = Math.max(document.documentElement.scrollTop, document.body.scrollTop),
      topOffset = this.anchor.offsetTop - NAV_OFFSET;
    if (this.el.className.indexOf('scroll') != -1) {
      if (scroll <= topOffset) {
        this.el.className = this.removedScrollClass;
      }
    } else if (scroll >= topOffset) {
      this.el.className += ' scroll';
    }
  }
  events() {
    window.addEventListener('load', () => { this.didRender(); });
    window.addEventListener('scroll', () => { this.onScroll(); });
    window.addEventListener('resize', () => { this.onResize(); });
  }
}
new StickyNav();

这个解决方案应该适用于顶部导航栏，也有一些小的调整。在代码中，我实际上添加了scroll类，但在您的情况下，它应该是sticky -在最后"粘性"听起来更合理。

相关文章：