jquery - 在特定宽度的滚动上显示/隐藏元素，为其他宽度切换

Question

我正在尝试制作一个在向下滚动时隐藏并在向上滚动时重新出现的导航，除非窗口宽度小于 775。如果宽度小于 775，行为应该是导航栏的切换它在滚动时保持固定位置。

我整理了一个 codepen here来证明我遇到的问题。如果页面加载时窗口 > 775，则它工作正常，如果窗口 < 775 则相同。问题是如果调整窗口大小，行为会变得不稳定。如果您从小开始，切换导航，然后调整大小，则导航不会出现，直到您开始滚动。如果您从大开始，然后调整大小，导航中会出现淡入/淡出行为。

现在，我意识到人们在使用我的网站时可能不会一直调整大小，但这让我抓狂。一定有办法让我的蛋糕也能吃吗？

我尝试了不同的条件语句来检查要显示的 css 值、比较窗口宽度以及使用 jQuery 选择器 :visible。一切的结果都一样。谁能帮我？基本上我想要的是，如果 #hamburger 正在显示(显示: block )，则切换应该生效。如果 #hamburger 被发送到 display: none，淡入/淡出应该生效。

这是我现在的位置:

//toggle hamburger icon + menu on mobile
$('#hamburger').click(function() {
    $('nav').toggle();  
});

//hide/show nav on scroll
function hideNav() {    
    var lastScrollTop = 0; 
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop)
            $('nav').fadeOut();  
        else 
            $('nav').fadeIn();
        lastScrollTop = st;
    });
}

//check window size on load
var windowWidth = $(window).width();
if (windowWidth > 775)
    hideNav();

//adjust if the window is resized
function resizeWindow(){
    var newWindowWidth = $(window).width();
    if (newWindowWidth > 775)
        hideNav();           
    else if (newWindowWidth <= 775)
        $('nav').hide();
 }

 $(window).resize(resizeWindow);   

Answer 1

试试这个:

$('#hamburger').click(function() {
  $('nav').toggle();
});

function hideNav() {
  var lastScrollTop = 0;
  $(window).on('scroll', function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      $('nav').fadeOut();
    } else {
      $('nav').fadeIn();
    }
    lastScrollTop = st;

  });
}

//check window size
var windowWidth = $(window).width();

if (windowWidth > 775) {
  hideNav();
}

//adjust the nav functionality if the window is resized

function resizeWindow() {
  $(window).off('scroll'); // unbind scroll event

  windowWidth = $(window).width(); // you may as well re-use windowWidth as it's global
  console.log(windowWidth);
  if (windowWidth > 775) {
    $('nav').show();
    hideNav();
  } else if (windowWidth <= 775) {
    $('nav').hide();
  }
}

$(window).resize(resizeWindow);

Updated Pen