吸顶菜单

css

        *{margin: 0;padding: 0;}
        #box{height: 1200px;width: 100%;}
        #topNav{width: 100%;height: 80px;background: #333;position: fixed;top:-80px;}

html

    <div id="box">
        <div id="topNav"></div>
    </div>

javascript

    window.onload = function(){
        window.onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > 200){//当滚动条滑动了200以后，吸顶菜单缓缓出现，否则吸顶菜单缓缓消失
                navMove();
            }else{
                navMove2();
            }
        }
        var topNav = document.getElementById('topNav');
        //顶部banner缓缓出现
        function navMove(){
            var curTop = topNav.offsetTop;
            var navTopTimer = setInterval(function(){
                curTop += 2;
                if(curTop == 0){
                    clearInterval(navTopTimer);
                }else{
                    topNav.style.top = curTop + 'px';
                }
            },10);
        }
        //顶部banner缓缓消失
        function navMove2(){
            var curTop = topNav.offsetTop;
            var navTopTimer2 = setInterval(function(){
                curTop -= 2;
                if(curTop <= -90){
                    clearInterval(navTopTimer2);
                }else{
                    topNav.style.top = curTop + 'px';
                }
            },10);
        }
    }

 

来源：https://www.cnblogs.com/solaris-wwf/p/11741682.html