我的页面分为三个部分,每个部分可以通过相应的菜单项访问。我试图在Javascript中实现这一点:当用户通过滚动到达任何部分时,相应菜单项的字体颜色应该改变。
我在这里调用函数:
<body onscroll="detectScroll(); showPosition();">
这是检测滚动并相应更改某些项目的功能。它工作正常:
function detectScroll() {
var header = document.querySelector(".headerOrig"),
header_height = getComputedStyle(header).height.split('px')[0],
header_class = "changeHeader",
logo = document.getElementById("logo")
;
if( window.pageYOffset > (parseInt(header_height) + 500)) {
header.classList.add(header_class);
logo.src = "images/logo2.png";
}
if( window.pageYOffset < (parseInt(header_height) + 500)) {
header.classList.remove(header_class);
logo.src = "images/logo1.png";
}
}
这个JS函数返回一个元素的位置。工作正常:
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
最后,这是滚动时调用的JS函数:
function showPosition() {
var myElement = document.getElementById("posBIKES");
var position = getPosition(myElement);
var bike = document.getElementById("bikesMenu");
//alert("The element is located at: " + position.x + ", " + position.y);
if(window.pageYOffset < position.y) {
window.getElementById("bikesMenu").classList.remove("changeMenu");
}
if(window.pageYOffset > position.y) {
window.getElementById("bikesMenu").classList.add("changeMenu");
}
}
问题是一切正常,直到我尝试添加或删除所选项目的类(最后一个函数)。任何其他声明都可以正常工作,例如,我尝试放置警报(“某事”);在这两种情况下,两者都按预期工作。那么添加和删除类有什么不对吗? 是的,我已经检查了所有内容的相应名称和ID,例如百万次,所以没有问题。 任何帮助都非常感谢。 感谢