Show/Hide 滚动特定宽度的元素，切换其他宽度

Question

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

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

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

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

这是我现在所在的位置：

//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

Show/Hide 滚动特定宽度的元素，切换其他宽度

Show/Hide Element on Scroll for certain width, toggle for other width

html

css

jquery

toggle

responsive-design