JavaScript 实现导航吸顶

JavaScript实现小效果：导航吸顶，当滚动一定距离时，导航固定在顶部。

HTML：

<header id="head">
        <img src="./images/top.png" alt="">
    </header>
    <nav id="nav">
        <img src="./images/nav.png" alt="">
    </nav>

    <section class="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
</section>

css：

*{
      margin:0;
      padding:0;
      list-style: none;
      border:none;
  }
  #head img,nav img{
      vertical-align: top;
      width:100%;
  }
  .nav-top{
      position: fixed;
      top:0;
      left:0;
      width: 100%;
  }
  .main>p{
      width:100%;
      height: 250px;      
  }
  .main>p:nth-child(even){
    background-color: antiquewhite;
  }
  .main>p:nth-child(odd){
    background-color:rgb(176, 223, 162);
  }

JavaScript：

 window.onload=function(){
            //1 求 offsetHeight
            var nav_top_height=$("nav").offsetTop;
            //2 监听窗口滚动
            window.onscroll=function(){
                var scroll_top_height=scroll().top;
                //2.1 判断
                if(scroll_top_height>=nav_top_height){
                    $("nav").className="nav-top";
                }else{
                    $("nav").className="";
                }
            }
        }

        function scroll() {
            if(window.pageYOffset !== null){
                return {
                    top: window.pageYOffset,
                    left: window.pageXOffset
                }
            }else if(document.compatMode === "CSS1Compat"){ // W3C
                return {
                    top: document.documentElement.scrollTop,
                    left: document.documentElement.scrollLeft
                }
            }

            return {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            }
        }

        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }