I have a scroll event and add class and remove classes for different elements. As you can see the code is a bit big. Is this method ok or is there a more efficient one?
I mean, you can see that there are no child elements. I could use .siblings()
for some but, as you can see, I also serve unique classes.
Any idea? I know it looks bad but I think it is the only way.
$(document).ready(function () {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("nav ul li").addClass("list-mini");
$("nav").addClass("nav-mini");
$("nav ul li a").addClass("nav-recolor");
$("nav img").removeClass("zoomOutLeft");
$("nav img").addClass("zoomInUp");
$("nav img").addClass("logo-mini-active");
$("nav ul").addClass("margin-transition");
$("ul").addClass("ul-active");
$("nav ul li a span").addClass("text-removed");
$("nav ul li a").addClass("nav-font");
$("nav ul li a span").addClass("transition-02s");
$(".fa-shopping-cart").addClass("fa-shopping-cart-mini");
$(".fa-globe").addClass("fa-globe-mini");
$(".fa-info").addClass("fa-info-mini");
$(".fa-circle-o-notch").addClass("fa-circle-o-notch-mini");
$(".fa-envelope-o").addClass("fa-envelope-o-mini");
} else {
$("nav ul").removeClass("margin-transition");
$("nav ul li").removeClass("list-mini");
$("nav").removeClass("nav-mini");
$("nav ul li a").removeClass("nav-recolor");
$("nav img").removeClass("zoomInUp");
$("nav img").addClass(" zoomOutLeft");
$("ul").removeClass("ul-active");
$("nav ul li a span").removeClass("text-removed");
$("nav ul li a").removeClass("nav-font");
$("nav ul li a span").removeClass("transition-02s")
$(".fa-shopping-cart").removeClass("fa-shopping-cart-mini");
$(".fa-globe").removeClass("fa-globe-mini");
$(".fa-info").removeClass("fa-info-mini");
$(".fa-circle-o-notch").removeClass("fa-circle-o-notch-mini");
$(".fa-envelope-o").removeClass("fa-envelope-o-mini");
}
});
});