Javascript滚动并调整窗口大小

Javascript scroll and window resize

本文关键字：窗口大小 调整 滚动 Javascript      更新时间：2023-09-26

我有一个名为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();
  }
});
});

您不需要向"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);
相关文章：