javascript - Windows resize event not properly detected -
i have navigation menu should stay fixed @ top of page using sticky.js plugin window-widths equal or larger 992 px. smaller windows, should go flow of site. now, responsive website, implement dynamic window width detection when window resized.
the following code not seem correctly detect resize event. have reload page stick / unstick navbar @ correct width:
$(document).ready(function() { var currentwindow = $(window); function checkwidth() { var windowsize = currentwindow.width(); if (windowsize >= 992) { // sticky.js $('.navbar').sticky({ topspacing: 0, getwidthfrom: '.upper-header', responsivewidth: true }); } else { alert('window smaller'); } } // execute on load checkwidth(); // bind event listener $(window).resize(checkwidth); });
would appreciate guidance.
you need unstick navbar when window shrinks.
$(document).ready(function() { var currentwindow = $(window); var stuck = false; // call plugin when necessary function checkwidth() { var windowsize = currentwindow.width(); if (windowsize >= 992 && !stuck) { // sticky.js $('.navbar').sticky({ topspacing: 0, getwidthfrom: '.upper-header', responsivewidth: true }); stuck = true; } else if (windowsize < 992 && stuck) { alert('window smaller'); $('.navbar').unstick(); stuck = false; } } // execute on load checkwidth(); // bind event listener currentwindow.resize(checkwidth); });
Comments
Post a Comment