I have been attempting to dynamically add and remove a class to the navbar based on vertical scroll, but for some reason, it's not having any effect.
The goal is to change the background color of the navbar as the page is scrolled, yet I can't seem to figure out why it's not working.
Even trying to apply CSS directly using $(element).css doesn't seem to be making a difference either.
Check out the code here: https://jsfiddle.net/r4Lxvqps/
Here's the HTML snippet:
<!DOCTYPE html>
<title>A</title>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Me</a>
</li>
<li id="logo">
<a href="#">Arshdeep</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt=""/>
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
</body>
And the accompanying CSS:
* {
padding: 0px;
margin:0 auto;
-webkit-transition: all .2s ease-in-out;
}
html, body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin:0px;
}
.container {
position:relative;
height: 100%;
}
nav {
padding: 5px 0px;
position:fixed;
width: 100%;
top:0;
z-index: 9999;
color:black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin:0 15px;
}
nav a {
text-decoration: none;
color:white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
...
/** About Me **/
This jQuery script checks if the offset is greater than 50 and then applies the CSS (color: black).JQuery:
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop;
if (scroll_offset > 50) {
$(".nav").css("color", "black");
}
});
});