网页定位导航案例（js方法）

js方法

<script>

//定义getByClassName函数，让函数实现根据class name获取对象并返回

   function hasClass( obj, cls ){ 
        return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    }
    
    function removeClass( obj, cls ){ 
        if( hasClass( obj, cls )){ 
            //remove
            var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
            obj.className = obj.className.replace(reg, "");
        }
    }

    function addClass(obj , cls ){
          if( !hasClass( obj, cls )){ 
            //remove
    
            obj.className += " "+ cls;
        }
    }
    
    
    //定义getByClassName函数，让函数实现给对象增加class 
    
    function getByClassName(obj , cls){
       var elements = obj.getElementsByTagName("*");
       var result = [];
       for (var i = 0; i< elements.length; i++) {
          if (elements[i].className == cls){
            result.push(elements[i])
          }
       }
       return result
    }
    
    function getScrollTop() {  
            var scrollPos;  
            if (window.pageYOffset) {  
            scrollPos = window.pageYOffset; }  
            else if (document.compatMode && document.compatMode != 'BackCompat')  
            { scrollPos = document.documentElement.scrollTop; }  
            else if (document.body) { scrollPos = document.body.scrollTop; }   
            return scrollPos;   
    }  
  
    window.onload = function(){ 

        
        window.onscroll = function(){   
             // 获取滚动条滚动距离    
            // var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
           
             var top=getScrollTop()
             // console.log(top)
            var menus = document.getElementById("menu").getElementsByTagName("a");
            // var items = document.getElementById("content").getElementByClassName("item")
            
            var items = getByClassName(document.getElementById("content"), "item");
            
            var currentId = "";
            
            for ( var i=0; i< items.length; i++ ){ 
                var _item = items[i];
                var _itemTop = _item.offsetTop;
                console.log(_itemTop)
                if( top > _itemTop - 200 ){ 
                    // 没有像jq一样加#，因为判定不需要
                    currentId = _item.id;
                } else { 
                    break;
                }           
            }
        
                            
      //请补充此处代码，给正确的menu下的a元素class赋值current
           if(currentId){
             for( var j = 0 ; j < menus.length ; j++){
                var _menu = menus[j];
                var _href = _menu.href.split("#");
//一个个找，如果是这个id就高亮，不是就不要高亮
                if (_href[_href.length - 1] != currentId) {
                  removeClass(_menu,"current");
                }else{
                  addClass(_menu,"current");
                }


             }
           }
      
    
        }   
    }   
  
                
</script>