Question

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

这是我的代码

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;
  }
}

我已经更新了你的小提琴：http://jsfiddle.net/cXH5g/2/

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

Answer 2

执行此操作的最佳方法是使用CSS3媒体查询。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

但如果你想用jquery：

$(function(){

if ($(window).width() > 980) {
    alert($(window).width());
    $('.stickynav').on('click', function(e) {
        e.preventDefault();
    });

    $(window).scroll(function() {
        var scrolltop = $(this).scrollTop();

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

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

我放了一个alert来查看你的代码何时起作用。检查 this fiddle

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

2 个答案: