我的剧本有问题。
在最小宽度为768px后，我问Modernizr。
如果变量“查询”返回true，则执行“hideNav”和“showNav”函数。
如果我的窗口宽度低于768px，则返回查询变量false，并且函数“hideNav”和“showNav”将不会运行。那是对的。
但是：窗口宽度超过768px宽。我将窗口大小更改为小于768px，变量“查询”返回false。还是正确的。但是，虽然变量 false ，但当我向上和向下滚动时，“hideNav”和“showNav”功能将继续运行。不应该这样！
我不明白......
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 Up
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
//** If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.
if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){
//** If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav.
if (currentScroll > previousScroll){
window.setTimeout(hideNav, 300);
//** Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
} else {
window.setTimeout(showNav, 300);
}
//** Set the previous scroll value equal to the current scroll.
previousScroll = currentScroll;
}
if (currentScroll == 0){
console.log("top");
}
console.log(currentScroll);
});
} else {
//** other stuff coming soon...
}
}).resize();
});