黏性导航固定菜单实现方法

需求：向下滚动鼠标后，导航固定在顶端位置。

原理：选择要固定的元素mn，为mn添加类.main-nav-scrolled。鼠标滚动前元素mn位于元素hdr下方，判断条件：当鼠标（窗口）向下滚动超过元素mn原来的纵坐标时，为元素添加新类.main-nav-scrolled固定元素mn的位置。

var mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

CSS代码

.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

参考链接：https://codepen.io/Guilh/pen/JLKbn

存档:

固定菜单

WordPress实现

不同主题、不同主机环境可能会有区别，如果不想调样式表，安装插件解决。如Sticky Menu (or Anything!) on Scroll