- A+
所属分类:WordPress插件 前端
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
需求:向下滚动鼠标后,导航固定在顶端位置。
原理:选择要固定的元素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

独角兽驿站
公众号