【问题标题】:Javascript scroll and window resizeJavascript滚动和窗口调整大小
【发布时间】:2015-03-03 02:46:20
【问题描述】:

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

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

【问题讨论】:

  • $(this).scrollTop() > 700 && window.innerWidth > 600,你错过了一个'&'?

标签: javascript jquery


【解决方案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);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-13
    • 1970-01-01
    相关资源
    最近更新 更多