我有一个名为 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();
}
});
});
最佳答案
您不需要为“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);
关于Javascript滚动和窗口调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28823231/