0
我有一個JavaScript函數，當窗口滾動到某些點時執行不同的條件語句。執行多個條件語句的onscroll函數的問題
（或多或少改變我的導航鏈接的風格時，窗口滾動到一個新的部分/行）
// 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";
}