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

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 block 是独立的。因此，您之前所做的任何样式更改每次都会被覆盖，因为它总是会进入这些 block 之一。

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";
} 

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