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.