I've implemented jQuery code to change the opacity of my navbar's background as the user scrolls, transitioning from transparent to blue. Here's the snippet:
$(window).scroll(function(){
var range = $(this).scrollTop();
var limit = 450;
var calc = range / limit;
console.log(range);
//Bg Opacity Control
if (range === 0) {
$('.navBg').css({
opacity: 0
});
}else if(range < limit){
$('.navBg').css({
opacity: calc
});
}else if(range > limit){
$('.navBg').css({
opacity: 1
});
}
});
Now, I want to add a font color transition that mirrors the background change based on scroll position. I've set up arrays with hexadecimal values for color scales:
var fontScale = ["#19BFFF", ... "#FFF"];
var hoverScale = ["#eaeaea", ... "#323031"];
How should I implement the font color transition using these arrays? Should I use loops or conditional statements?
Here are the jQuery selectors for elements that will change color:
//Main Font color using fontScale array
$('.navbar .navbar-header .navbar-brand')
$('.navbar #navbar ul li a')
//Active links using hoverScale array
$('.navbar #navbar .navbar-nav > .active > a')
//Hover links using hoverScale array
$('.navbar #navbar ul li a:hover')
Any advice on how to proceed would be appreciated!
**UPDATE
Here is the HTML structure:
<div class="navBg">
</div>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand" href="#home">JG</span>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
This is the updated jQuery code:
var currentFontIndex = range * fontScale.length / limit;
currentFontIndex = Math.round(currentFontIndex);
console.log(fontScale[currentFontIndex]);
if(currentFontIndex > fontScale.length){
$('.navbar .navbar-header .navbar-brand').css({
color: fontScale[currentFontIndex]
});
$('.navbar #navbar ul li a').css({
color: fontScale[currentFontIndex]
});
}
However, the styles aren't being applied despite correct index values in the fontScale array. Any thoughts on why this might be happening?
Looking forward to your input!