Question

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

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

现在，我意识到人们可能在他们使用我的网站时不会一直调整大小但这让我发疯。当然必须有一种方法可以吃我的蛋糕并吃它？

我尝试过不同的条件语句检查显示的css值，比较窗口宽度以及使用jQuery选择器：visible。一切都相同。谁能帮我？基本上我想要的是如果显示#hamburger（显示：块），切换应该生效。如果将#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

在滚动上显示/隐藏元素以获得特定宽度，切换其他宽度

1 个答案: