My JavaScript function triggers various conditional statements based on the user's scrolling behavior.
(Specifically, it adjusts the design of my navigation links as the window moves into different sections or rows.)
// list of variables
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 implementation
window.onscroll = function() {scrollLink() };
function scrollLink() {
/*
When the top of the window scrolls to a certain point (within 100):
the background color of row-2 and 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 past 450:
execute slide() for text animation from left to center
*/
} if (document.body.scrollTop > 450 || document.documentElement.scrollTop > 450) {
slide();
/*
When the top of the window enters row-2 (past 692):
change nav link colors from pink to white and reduce opacity
needed for visibility when bgChange1 turns background pink
when window scrolls back to row-1 (past 692 in opposite direction):
revert nav link colors and opacity
*/
} 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";
}
};
The current function is functioning correctly.
However, when I try to introduce an additional conditional statement below, the function starts malfunctioning. The new condition does not trigger, and it disrupts the previously working logic above.
/*
When the top of the window reaches row-3 (past 1800):
change nav link colors to pink for better visibility against background
when window returns to row-2 (past 1800 in reverse):
reset nav link colors and opacity to match row-2 style
*/
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";
}