After extensive testing on all the browsers available on my computer, I implemented error handling and encountered no issues.
The script is simple and works, but not as intended.
When scrolling down, the bar should change to red, and while scrolling up, it should turn green (I used random colors for demonstration).
The issue arises when the color changes to red instantly as expected, but when it has to switch back to green at the top, it takes nearly 20 seconds to respond.
Here is the complete code snippet:
(function(){
"use strict";
$(document).ready(function(){
var advancedNav = $('.navigation').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > advancedNav ) {
$(".navigation").animate({
"background-color": "red"
}, 1000)
}
else {
$(".navigation").animate({
"background-color": "green"
}, 1000)
}
});
});
})();.navigation {
width: 100%;
position: fixed;
overflow: hidden;
background: rgba(15, 15, 15, 0);
z-index: 1;
}
.navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li {
float: left;
}
.navigation li a {
display: inline-block;
color: white;
text-align: center;
font-size: 20px;
padding: 14px 16px;
margin-left: 20px;
width: 50px;
text-decoration: none;
font-family: barelFont;
}
.navigation li a:hover {
background-color: #fff;
color: #ddd;
}<header>
<div class="navigation">
<ul>
<li><a href="#everest">Main</a></li>
<li><a href="#projectsSection">Projects</a></li>
<li><a href="#aboutSection">About</a></li>
<li><a href="#contactSection">Contact</a></li>
</ul>
</div>
</header>Upon attempting to rectify the issue, using the original jQuery css() method proved successful.
However, in pursuit of a dynamic and visually appealing solution, implementing jQuery Color and jQueryUI resulted in the same delay.
What could be causing this problem?