Javascript滚动和窗口调整大小

时间:2015-03-03 02:46:20

标签: javascript jquery

我有一个名为navbar的div类,当页面向下滚动700px时我想要淡化。但是,当页面宽度小于600px时,我不希望它显示。有什么想法吗?

$(window).addEventListener('onresize',function(){ 
 $(window).scroll(function (e) {
 e.preventDefault();
  if ($(this).scrollTop() > 700 & window.innerWidth > 600) {
    $('.navbar').fadeIn();
  }
  else {
    $('.navbar').fadeOut();
  }
});
});

1 个答案:

答案 0 :(得分:1)

您无需将监听器添加到" onresize",window.innerWidth是动态的,因此在调整大小时会有所不同。

$(window).scroll(function (e) {
    e.preventDefault();
    if ($(this).scrollTop() > 700 && window.innerWidth > 600) {
        $('.navbar').fadeIn();
    }
    else {
        $('.navbar').fadeOut();
    }
});

或者如果你没有滚动调整大小,你可以分成两个。

function listener (e) {
    e.preventDefault();
    if ($(window).scrollTop() > 700 && window.innerWidth > 600) {
        $('.navbar').fadeIn();
    }
    else {
        $('.navbar').fadeOut();
    }
}
$(window).scroll(listener);
$(window).resize(listener);