- 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
独角兽驿站
公众号
