if statement - jQuery function triggered, although if condition is false -
i have problem script.
i ask modernizr after minimum width of 768px.
if variable "query" returns true, functions "hidenav" , "shownav" executed.
if window width below 768px, returns query variable false , functions "hidenav" , "shownav" not run. that's right.
but:the window width more 768px wide. change window size less 768px , variable "query" returns false. still correct. however, although variable false, functions "hidenav" , "shownav" will continue run when scroll , down. should not so!
i not understand that...
var hidenav = function() { console.log("fire hidenav"); $("[data-nav-status='toggle']").removeclass("is-visible").addclass("is-hidden"); } var shownav = function() { console.log("fire shownav"); $("[data-nav-status='toggle']").removeclass("is-hidden").addclass("is-visible"); } $(document).ready(function() { //** viewport check $( window ).resize(function() { var query = modernizr.mq('(min-width: 768px)'); console.log("query is: "+query+"."); if (query) { //** navigation bar show nn scroll var previousscroll = 0; $(window).scroll(function(){ var currentscroll = $(this).scrolltop(); //** if current scroll position greater 0 (the top) , current scroll position less document height minus window height (the bottom) run navigation if/else statement. if (currentscroll > 0 && currentscroll < $(document).height() - $(window).height()){ //** if current scroll greater previous scroll (i.e we're scrolling down page), hide nav. if (currentscroll > previousscroll){ window.settimeout(hidenav, 300); //** else scrolling (i.e previous scroll greater current scroll), show nav. } else { window.settimeout(shownav, 300); } //** set previous scroll value equal current scroll. previousscroll = currentscroll; } if (currentscroll == 0){ console.log("top"); } console.log(currentscroll); }); } else { //** other stuff coming soon... } }).resize(); });
Comments
Post a Comment