網(wǎng)頁定位導航案例(js方法)

js方法

<script>

//定義getByClassName函數(shù),讓函數(shù)實現(xiàn)根據(jù)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函數(shù),讓函數(shù)實現(xiàn)給對象增加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>
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容