Optimizing jQuery addclass / removeclass on scroll 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 &gt;= 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");
            }
        });
    });
You shouldn't be doing so much manipulation of the classes. Instead, you could just add or remove a scrolled-down class to the &lt;body&gt; element. Then specify the rest of the changes using pure CSS.  (For example, you would have a body.scrolled-down nav { … } rule.)