Change zurb foundation top bar style on.scroll in wordpress theme using jquery and css

You need to fully reference jQuery throughout your code. It should be…

jQuery(window).on("scroll", function() {
    if(jQuery(window).scrollTop() > 50) {
        jQuery(".top-bar").addClass("active");
    } else {
       jQuery(".top-bar").removeClass("active");
    }
});

When in no-conflict mode you need to always reference jQuery in full and not use the $. No conflict mode exists to prevent conflicts when jQuery is used with other libraries. Some other JS libraries use the $ for a short reference just like jQuery does.

If you want to use the $ as a reference to jQuery when in no-conflict (as WordPress requires), you could always do something like this instead…..

(function($) {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".top-bar").addClass("active");
        } else {
           $(".top-bar").removeClass("active");
        }
    });
})(jQuery); // Fully reference jQuery after this point.