My goal is to encapsulate this code:
if($(window).width() > 980) {
$(window).on("scroll", function() {
if($(window).scrollTop() > 20) {
//add black background
$(".x-navbar").addClass("active");
$(".x-navbar .desktop .x-nav li a").addClass("small-bar");
}
else {
//remove background
$(".x-navbar").removeClass("active");
$(".x-navbar .desktop .x-nav li a").removeClass("small-bar");
}
});
}
into a function, making it possible to deactivate it when the width is under 980px.
The desired outcome consists of the following steps:
Create a function like this:
navBar = function () {
// entire code block goes here.
}
and later "disable" it on mobile devices with a width below 980px as follows:
if($(window).width() < 980) {
// DO NOT execute the function named "navBar".
}
The issue I am facing is that upon resizing the window to a width less than 980px, the code does not respond to the resize event and continues to run regardless.