Need to apply :hover when the .active class is added with the scrollTop() function > 50, as it removes the a:hover class.
Check out this code snippet on CodePen
.logo a {
color: #000;
font-size: 36px;
text-decoration: none;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-decoration: none;
font-size: 36px;
}
nav ul li a.active {
color: coral;
}
.logo a.active {
color: coral;
}
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$("nav ul li a").addClass("active");
} else {
$("nav ul li a").removeClass("active");
}
});
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$(".logo a").addClass("active");
} else {
$(".logo a").removeClass("active");
}
});