js方法
<script>
//定義getByClassName函數(shù),讓函數(shù)實(shí)現(xiàn)根據(jù)class name獲取對(duì)象并返回
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ù)實(shí)現(xiàn)給對(duì)象增加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(){
// 獲取滾動(dòng)條滾動(dòng)距離
// 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 ){
// 沒(méi)有像jq一樣加#,因?yàn)榕卸ú恍枰? currentId = _item.id;
} else {
break;
}
}
//請(qǐng)補(bǔ)充此處代碼,給正確的menu下的a元素class賦值current
if(currentId){
for( var j = 0 ; j < menus.length ; j++){
var _menu = menus[j];
var _href = _menu.href.split("#");
//一個(gè)個(gè)找,如果是這個(gè)id就高亮,不是就不要高亮
if (_href[_href.length - 1] != currentId) {
removeClass(_menu,"current");
}else{
addClass(_menu,"current");
}
}
}
}
}
</script>