导航显示/隐藏滚动

我正在构建一个脚本来显示/隐藏页面上某个高度的导航菜单。它确实有效，当我缩放页面并且布局捕捉到它的下一个状态时，滚动显示/隐藏脚本仍然根据加载时窗口的宽度以相同的高度运行。导航显示/隐藏滚动

下面是代码：

$(window).on('scroll', function(){ 
    if($winwidth > 1200){ 
     console.log('over 1200'); 
     var $menudrop = 800; 
     if($(window).scrollTop() >= $menudrop){ 
      $('#hidden-nav').slideDown(1000); 
     }else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } 
}); 

$(window).on('scroll', function(){ 
    if($winwidth < 1200 && $winwidth > 992 ){ 
     console.log("under 1200"); 
     var $menudrop = 560; 
     if($(window).scrollTop() >= $menudrop){ 
      $('#hidden-nav').slideDown(1000); 
     }else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } 
});

什么我没有得到吗？

来源

2014-01-07 EZDC

在使用它之前，您必须刷新$winwidth的值，因为它的值可能因调整大小事件而发生更改。通常没有理由维护一个全局宽度值，所以我建议把它改成一个像这样的局部变量，只要你需要它就可以得到它。

$(window).on('scroll', function() { 
    var $winwidth = $(window).width(); 
    if ($winwidth > 1200) { 
     console.log('over 1200'); 
     var $menudrop = 800; 
     if ($(window).scrollTop() >= $menudrop) { 
      $('#hidden-nav').slideDown(1000); 
     } else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } else if ($winwidth < 1200 && $winwidth > 992 ){ 
     console.log("under 1200"); 
     var $menudrop = 560; 
     if ($(window).scrollTop() >= $menudrop) { 
      $('#hidden-nav').slideDown(1000); 
     } else{ 
      $('#hidden-nav').slideUp(1000); 
     } 
    } 
});

我还建议你将所有的逻辑合并到一个滚动处理程序中，因为没有理由有两个独立的事件处理程序。

来源

2014-01-07 22:27:12 jfriend00

不滚动事件，window.resize事件 –

@StephenThomas - 问题是，如果'$ winwidth'的值在使用前刷新，它不会过期。 – jfriend00

那么，你不会告诉我们你如何设置$winwidth，但如果它在页面加载时设置，则需要在window.resize事件上更新它。

来源

2014-01-07 22:26:55

导航显示/隐藏滚动

回答

相关问题