使用JS实现中部导航特效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/y429747705/article/details/81944484

GitHub地址：https://github.com/yYohao/JSDemo

1.HTML布局

    这设置三个div，包括头部、导航和内容

[code].nav{
position: fixed;
top: 0;
left: 0;
}

2.js

    2.1 获取需要的标签dom

    2.2 滚动监听

var nav = document.getElementById("nav");

var nav_top = nav.offsetTop;

[code]window.onscroll = function () {

// 方法1
//if (scroll().top > nav_top) {
//    nav.style.top = scroll().top + 'px';
//}else {
//    nav.style.top = nav_top + 'px';
//}

// 方法2
if (scroll().top > nav_top) {
nav.className = "nav";
}else {
nav.className = "";
}

}

阅读更多