js实现导航条置顶

导航条置顶

 <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="top"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

 * {
            padding: 0;
            margin: 0;
        }

        ul li {
            list-style: none;
        }
        .top {
           
            height: 100px;
            background-color: red;
        }
        li {
            width: 100%;
            height: 100px;
            background-color: pink;
            margin-bottom: 20px;
        }

 var oUl=document.getElementsByTagName('ul')[0];
    var otop = document.getElementsByClassName('top')[0];
    var navh = otop.offsetTop;
      //2.添加滚动事件，如果滚动的距离大于等于pingjia的div到body的距离，就可以一直停在顶部
    window.onscroll = function () {   
        var top1 = document.documentElement.scrollTop || document.body.scrollTop;
        if (top1 >= navh) {
            otop.style.position = 'fixed';
            otop.style.top = '0';
        } else {
            otop.style.position = 'relative';
        }
    }

效果图