页面导航随滚动条悬浮或者停靠

代码块

/* CSS */
*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 15px;
    font-family:"Microsoft yahei";
}
.head{
    width: 100%;
    height: 180px;
    background: #f00;
}
.top{
    width: 100%;
    background: #000;
    height: 60px;
    position: absolute;
}
.place{
    width: 100%;
    height: 400px;
}
.bjg{
    background-color: #B73150;
}
.bjr{
    background-color: #C85151;
}
.pf{
    position: fixed;
    top: 0;
    left: 0;
}

<div class="head"></div>
<div class="top">导航</div>
<div class="place bjg"></div>
<div class="place bjr"></div>
<div class="place bjg"></div>
<div class="place bjr"></div>

    <SCRIPT>
        var oHead = getClassname("head")[0];
        var oHig = oHead.offsetHeight;

        window.onscroll = function(){
            var oTop = getClassname("top")[0];
            var scroll = getScrollTop();
            if(scroll > oHig){
                addClass(oTop,"pf");
            }else{
                removeClass(oTop,"pf");
            }
        }


        // 获取滚动条距离顶部距离
        function getScrollTop(){
            return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        }

        // 获取含有classname的节点
        function getClassname(classnames){
            var oDiv;
            var oBj = [];
            if(document.getElementsByClassName){
                oBj = document.getElementsByClassName(classnames);
            }else{
                oDiv = document.getElementsByTagName("*");
                var oLen = oDiv.length;
                var oClass;
                for (var i = 0; i < oLen; i++) {
                    oClass = oDiv[i].className;
                    if(oClass.indexOf(classnames) != -1){
                        oBj[oBj.length] = oDiv[i];
                    }
                }
            }
            return oBj;
        }

        //判断某个节点是否含有class
        function hasClass(elements,cName){  //http://www.jb51.net/article/35490.htm
            return !!elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
        }

        // 添加class
        function addClass(elements,cName){
            if( !hasClass( elements,cName ) ){ 
                elements.className += " " + cName; 
            };
        }

        // 移除class
        function removeClass(elements,cName){
            if( hasClass( elements,cName ) ){ 
                // replace方法是替换 
                elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); 
            }
        }
    </SCRIPT>

效果：滚动条滚动超过头部高度，导航会悬浮在头部