javascript - 当浏览器调整大小时隐藏粘性导航

Question

我为我的项目创建了粘性导航，并且此粘性导航必须仅在桌面最小 980 像素上显示，并在我调整浏览器大小时动态隐藏在 980 像素以下。

这是我的代码

if ($(window).width() > 980) {      
$('.stickynav a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= 132) {
      $('.stickynav').fadeIn(250);
    }

    else if(scrolltop <= 210) {
      $('.stickynav').fadeOut(250);
    }
});
}   

我在 jsfiddle 创建我该如何解决这个问题？

Answer 1

您可以使用媒体查询在 CSS 中执行此操作。

@media only screen and (max-width: 979px) {
  .stickynav{
    display: none;
  }
}

我已经更新了你的 fiddle :http://jsfiddle.net/cXH5g/2/

媒体查询允许您为特定设备/屏幕尺寸定义 CSS。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries