This question has been boggling my mind lately. I have a JavaScript function that used to work perfectly until I switched to the MVC model. The function is meant to reverse the colors of the navbar on scroll, changing it from white with grey text to grey with white text.
Below is the code for the function:
window.addEventListener("scroll", function () {
const mainNav = document.getElementById("navbar");
if (this.window.pageYOffset > 0) {
mainNav.classList.add("navscroll");
mainNav.classList.add("navscroll a");
mainNav.classList.add("navscroll #navcustom_1:hover");
mainNav.classList.add("navscroll #navcustom_2:hover");
mainNav.classList.add("navscroll #navcustom_3:hover");
} else {
mainNav.classList.remove("navscroll");
mainNav.classList.remove("navscroll a");
mainNav.classList.remove("navscroll #navcustom_1:hover");
mainNav.classList.remove("navscroll #navcustom_2:hover");
mainNav.classList.remove("navscroll #navcustom_3:hover");
}
});
Before scrolling:
https://i.sstatic.net/TOiw8.png
After scrolling, only the first line is not working:
https://i.sstatic.net/HdZ5e.png
The CSS code related to this issue:
.navscroll {
background-color: #3f3f3f !important;
}
.navscroll a {
color: white !important;
}
.navscroll #navcustom_1:hover {
color: #b82be2 !important;
}
.navscroll #navcustom_2:hover {
color: #e25822 !important;
}
.navscroll #navcustom_3:hover {
color: #2e8b57 !important;
}
I'm also including the necessary files in header.php, required for all other pages:
<link rel="stylesheet" href="../CSS/style.css" />
<script src="../JS/functions.js"></script>
Here's the HTML structure of the navbar:
<nav class="navbar navbar-expand-md navbar-light bg-white sticky-top" id="navbar">
<div class="container-fluid" id="containerF">
<a class="navbar-brand" href="index.html">
<h3>WildCampers</h3>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto" id="navbarAuto">
I'm really struggling to figure out why this issue is happening and it's driving me crazy. If you need more details, please let me know.