<script>

//根據(jù)className獲取元素,解決ie沒有g(shù)etElementsByClassName

function getByClassName(obj,cls) {

var elements = obj.getElementsByTagName("*");

var result = [];//聲明數(shù)組

for (var i = 0; i < elements.length; i++) {

if(elements[i].className == cls){//如果后面有多個className這個就不行了

result.push(elements[i]);

}

}

return result;

}

window.onload=function(){

//監(jiān)聽滾動事件

window.onscroll=function(){

//法一

var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

//法二

/*if(document.documentElement.scrollTop){

top = document.documentElement.scrollTop;

}else{

top = document.body.scrollTop;

}*/

//法三

// var top = document.documentElement.scrollTop || document.body.scrollTop;

//前面兼容IE，后面兼容chrome

var menus = document.getElementById('menu').getElementsByTagName("a");

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;

if(top > _itemTop-200){

currentId = _item.id;

}else{

break;//直接跳出for循環(huán)，如果是continue則表示 繼續(xù)執(zhí)行下一個for循環(huán)，不執(zhí)行后面的代碼

}

}

if(currentId){

for (var j = 0; j < menus.length; j++) {

var _menus = menus[j];

var _href = _menus.href.split("#");

/*js中利用_menus.href獲取的是整個網(wǎng)址帶上href,所以這里用split通過#分割成兩個數(shù)組

file:///D:/Demo/jquery/網(wǎng)頁定位導(dǎo)航特效/網(wǎng)頁定位導(dǎo)航(源代碼)/demo.html#item2*/

if (_href[_href.length - 1] != currentId) {

_menus.className="";

}else{

_menus.className="current";

}

}

}

};

};

</script>