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

时间:2015-04-20 19:21:30

标签: javascript menu position menuitem

我的页面分为三个部分,每个部分可以通过相应的菜单项访问。我试图在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 个答案:

没有答案