JS导航吸顶特效

效果图

HTML

<header id="header">
    <img src="图片/header.PNG" alt="">
</header>
<nav id="nav">
    <img src="图片/navPNG.PNG" alt="">
</nav>
<section id="section">
    <img src="图片/section.PNG" alt="">
    <img src="图片/section2.PNG" alt="">
</section>

CSS

 *{
            margin: 0;
            padding: 0;
            border:none;
        }
        img{
            vertical-align: top;
            width: 100%;
        }
        .nav{
            position: fixed;
            top: 0;
        }

JS

封装求滚动条滚动长度的函数
为了处理兼容性问题

/**
 * 获取滚动的头部距离和左边距离
 * scroll().top scroll().left
 * @returns {{top: number, left: number}}
 */
function scroll() {
    if(window.pageXOffset!==null)//新型模式
    {
        return {
            top:window.pageYOffset,
            left:window.pageXOffset
        }
    }else if(document.compatMode==="CSS1Compat"){//严格模式
        return{
            top:document.documentElement.scrollTop,
            left:document.documentElement.scrollLeft,
        }
    }
    return{//异常模式
        top:document.body.scrollTop,
        left:document.body.scrollLeft,
    }
}

事件分析

页面滚动（onscroll）到一定位置时吸顶

<script src="Scroll.js"></script>
<script>
  window.onload = function () {
    var OffsetHeight=document.getElementById("nav").offsetTop;
    //计算导航栏距离顶部的距离
    console.log(OffsetHeight);
    var nav1=document.getElementById("nav");
    //获取nav
    console.log(nav1);
    //2、监听窗口的滚动
    window.onscroll = function () {
      var scrolltop=scroll().top;//获取滚动条的滚动长度
      console.log(scrolltop);
       if(scrolltop>=OffsetHeight){
          nav1.className="nav";
      }else
        nav1.className=" ";
    }
  }
    

注意点：
在滚动条往回滚时，要求清除nav样式
否则会造成回去以后导航栏还是吸顶的状态