仅使用本机JavaScript的粘性导航栏

如果不使用jQuery，我如何制作一个粘性导航条

我想做一些类似的事情：

if (scrollheight == x)

navbar.addclass "sticky"

---

我最近使用EmberJS开发了sticky边栏导航

无论如何，在最后，我决定将解决方案提取到基于香草javascript的笔中，因为粘性导航似乎是非常常见的功能

你可以在这里看到：

Github项目：

以下是我用于该功能的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();

//https://github.com/moubi/sticky-nav
常量导航偏移=30；
类粘滞导航{
构造函数（）{
this.el=null；
this.anchor=null；
this.removedScrollClass=''；
此为.events（）；
}
didRender（）{
this.el=document.getElementsByTagName（'nav'）[0]；
this.anchor=document.getElementsByClassName（'nav-anchor'）[0]；
this.removedScrollClass=this.el.className；
这个.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-导航偏移；
if（this.el.className.indexOf（'scroll'）！=-1）{
如果（滚动=拓扑偏移）{
this.el.className+='scroll'；
}
}
事件（）{
window.addEventListener（'load'，（）=>{this.didRender（）；}）；
window.addEventListener（'scroll'，（）=>{this.onScroll（）；}）；
addEventListener（'resize'，（）=>{this.onResize（）；}）；
}
}
新StickyNav（）；

此解决方案应适用于顶部导航栏，并进行一些小的调整。

---

在代码中，我实际上添加了

滚动

类，但在您的情况下，它应该是

粘性的

-最后，“粘性”听起来更合理。

为什么不让导航栏的位置：固定？在css中？而不是js？您可以

导航栏.className='sticky'

或

导航栏.classList.add（'sticky'）

-仅在现代浏览器上