Ceiling menu

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) { // when the scroll bar 200 after the ceiling menu slowly appears, or suction top menu slowly disappeared 
                navMove ();
            }else{
                navMove2();
            }
        }
        var topnav = document.getElementById ( 'topnav' );
         // Top banner appears slowly 
        function navMove () {
             var curtop = topNav.offsetTop;
             var navTopTimer = the setInterval ( function () {
                curTop += 2;
                if(curTop == 0){
                    clearInterval(navTopTimer);
                }else{
                    topNav.style.top = curTop + 'px';
                }
            },10);
        }
        // Top banner slowly disappeared 
        function navMove2 () {
             var curtop = topNav.offsetTop;
             var navTopTimer2 = the setInterval ( function () {
                curTop -= 2;
                if(curTop <= -90){
                    clearInterval(navTopTimer2);
                }else{
                    topNav.style.top = curTop + 'px';
                }
            },10);
        }
    }