Question

我的页面分为三个部分，每个部分可以通过相应的菜单项访问。我试图在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，例如百万次，所以没有问题。任何帮助都非常感谢。感谢

菜单项根据元素的位置改变颜色

0 个答案: