vue使用原生js实现滚动页面跟踪导航高亮的示例代码

2020-06-14 06:18:03易采站长站整理

obj.className = cls;
}
}

let pos = document.documentElement.scrollTop;
if (pos > 300) {
document.querySelector('.nav-container').style.display = 'block';
} else {
document.querySelector('.nav-container').style.display = 'none';
}
var menus = document.getElementById("js-nav").getElementsByTagName("li");
var items = document.getElementById("js-content").querySelectorAll(".item");
var currentId = "";

for (var i = 0; i < items.length; i++) {
var _item = items[i];
var _itemTop = _item.offsetTop;
if (pos > _itemTop - 200) {
currentId = _item.id;
} else {
break;
}
}
if (currentId) {
for (var j = 0; j < menus.length; j++) {
var _menu = menus[j];
// href属性获取的是整个link,需以#为界截除获取最后一个元素;
var _href = _menu.getAttribute('data-id');
if (_href != currentId) {
removeClass(_menu, "cur");
} else {
addClass(_menu, "cur");
}
}
}
})
}
}
};