Question

我有一个JavaScript函数，当窗口滚动到某些点时执行不同的条件语句。

（当窗口滚动到新的部分/行时，或多或少地改变导航链接的样式）

// variables used
var pLink = document.getElementById('p-link');

var rLink = document.getElementById('r-link');

var bLink = document.getElementById('b-link');

var cLink = document.getElementById('c-link');

var pElement = document.getElementById('slide');

var row2 = document.getElementById('row-2')

var pHeader = document.getElementById('p-header');

//function starts here

window.onscroll = function() {scrollLink() };
function scrollLink() {

/* 
when the top of the window scrolls to the top of the page (within 100):
the background color of row-2 (and the color of its text elements) revert back to their original styles 
*/

if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
} else {
        document.getElementById('row-2').style.backgroundColor = "#5e312b";
        document.getElementById('p-header').style.color = "#fff";
        pElement.style.color = "#fff";

/*
when the top of the window scrolls to a certain point (past 450):
slide() is executed (text animation - moves from left to center)
*/

} if (document.body.scrollTop > 450 || document.documentElement.scrollTop > 450) {
        slide();

/* 
when the top of the window scrolls into row-2 (past 692):
the color of the nav links changes from pink to white and the opacity of the nav links (except portfolio) is reduced
this change is needed for visibility (when bgChange1 is executed - the background turns pink) 
when the top of the window scrolls back into row-1 (past 692 in the other direction):
the color and opacity of the nav links reverts back to their original style
*/

} if (document.body.scrollTop > 692 || document.documentElement.scrollTop > 692) {
        pLink.style.color = "#fff";
        rLink.style.color = "#fff";
        bLink.style.color = "#fff";
        cLink.style.color = "#fff";
        rLink.style.opacity = ".6";
        bLink.style.opacity = ".6";
        cLink.style.opacity = ".6";
}   else {
        pLink.style.color = "#D07F8D";
        rLink.style.color = "#D07F8D";
        bLink.style.color = "#D07F8D";
        cLink.style.color = "#D07F8D";
        rLink.style.opacity = "1";
        bLink.style.opacity = "1";
        cLink.style.opacity = "1";
}
};

上面的功能正常。

但是，当我尝试添加最后一个条件语句（下面）时，该函数停止正常工作。新的条件语句不仅不会执行，而且会破坏以前工作的函数（上图）。

/*
when the top of the window scrolls into row-3 (past 1800):
the color of the nav links changes to pink
this change is needed for visibility (the previous if statement styled the links white - hard to see against row-3's background)
when the top of the windows scrolls back into row-2 (past 1800 in the other directon):
the color and opacity of the nav links reverts back to their style in row-2
*/

if (document.body.scrollTop > 1800 || document.documentElement.scrollTop > 1800) {
        pLink.style.color = "#D07F8D";
        rLink.style.color = "#D07F8D";
        bLink.style.color = "#D07F8D";
        cLink.style.color = "#D07F8D";
        pLink.style.opacity = ".5";
        bLink.style.opacity = ".5";
        cLink.style.opacity = ".5";
} else {
        pLink.style.color = "#fff";
        rLink.style.color = "#fff";
        bLink.style.color = "#fff";
        cLink.style.color = "#fff";
        pLink.style.opacity = "1";
        bLink.style.opacity = "1";
        cLink.style.opacity = "1";
}

Answer 1

因为你的ifs都是单独处理的，而不是用else if以某种方式写的。因此，每次函数运行时，它总是会触及您添加的最后一个语句的else语句。

当if (document.body.scrollTop > 1800 || document.documentElement.scrollTop > 1800) {为false时，任何时候它都不大于它运行else语句，该语句将所有内容设置回白色和完全不透明。

换句话说，这个if块是独立的。因此，您所做的任何先前的样式更改都将被覆盖，因为它总是会进入其中一个块。

if (document.body.scrollTop > 1800 || document.documentElement.scrollTop > 1800) {
        pLink.style.color = "#D07F8D";
        rLink.style.color = "#D07F8D";
        bLink.style.color = "#D07F8D";
        cLink.style.color = "#D07F8D";
        pLink.style.opacity = ".5";
        bLink.style.opacity = ".5";
        cLink.style.opacity = ".5";
} else {
        pLink.style.color = "#fff";
        rLink.style.color = "#fff";
        bLink.style.color = "#fff";
        cLink.style.color = "#fff";
        pLink.style.opacity = "1";
        bLink.style.opacity = "1";
        cLink.style.opacity = "1";
}

也许您可以在每个中添加return语句，以便在设置样式后停止后续ifs。

onscroll函数执行多个条件语句的问题

1 个答案: