After successfully implementing a sticky navigation that works flawlessly, I am now looking to make it activate only when the browser width is less than or equal to 770px.
This is my current code:
$j = jQuery.noConflict();
$j(document).ready(function() {
var navOffset = $j(".main-nav").offset().top;
var wi = $j(window).width();
var sticky;
$j(".responsive-icon").wrapInner('<div class="value"></div>');
$j(".main-nav").wrap('<div class="nav-placeholder"></div>');
$j(".nav-placeholder").height($j(".main-nav").outerHeight());
function activateStickyNavigation() { /*Function to make navigation sticky*/
sticky = $j(window).scroll(function() {
var scrollPos = $j(window).scrollTop();
if (scrollPos >= navOffset) {
$j(".main-nav").attr("id", "fixed-menu");
} else {
$j(".main-nav").removeAttr("id");
}
});
return sticky;
}
if(wi <= 770) { /*Activate immediately if browser width is less than 770px */
activateStickyNavigation();
}
$j(window).resize(function() { /*Activate on browser resize*/
if(wi <= 770) {
activateStickyNavigation();
}
});
});
How can I trigger the activation of the sticky navigator based on the browser's width?
Thanks!