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

发表评论
479

A+

Warning: Undefined variable $rr_password in /www/wwwroot/www.djsyz.com/wp-content/themes/begin/inc/down.php on line 21

Warning: Undefined variable $begin_name in /www/wwwroot/www.djsyz.com/wp-content/themes/begin/inc/down.php on line 25

Warning: Undefined variable $demo_content in /www/wwwroot/www.djsyz.com/wp-content/themes/begin/inc/down.php on line 28

CSS代码
WordPress实现

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

原理：选择要固定的元素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

文件下载 资源名称：Sticky Menu (or Anything!) on Scroll系统平台：WordPress软件版本：2.0.1官方网站：https://cn.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

下载地址

打赏赞

独角兽驿站

公众号

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

CSS代码

WordPress实现

发表评论取消回复

微信