我试图在用户向下滚动后在顶部添加一个固定的 div,但是如果调整大小的窗口小于 768px,如何隐藏相同的 div,如果窗口大于 769px,如何再次显示它?
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$('.js-quick-navbar').show();
} else if($(this).width() < 768) {
$('.js-quick-navbar').hide();
}
});
<强> jsFiddle
最佳答案
如果只是根据窗口宽度显示或隐藏 div 的问题,那么您可以使用媒体查询。
@media (max-width:768px){
.quick-navbar {
display:none;
}
}
}
http://jsfiddle.net/daveSalomon/qefoLdwa/7/
但是,如果您需要支持不支持 CSS 媒体查询的浏览器(哎呀!),那么您可以使用 jQuery,并监听 window.resize
。
值得研究节流
,并优化以下内容。例如,无论是否有必要,.show()
都会被调用。它还会为窗口大小调整的每个 px
触发一个事件 - 您确实希望将它们批处理在一起并每 x 秒执行一次。 (很棒的帖子:http://benalman.com/projects/jquery-throttle-debounce-plugin/)
$(window).resize(function(){
var w = $(this).width();
if(w > 768){
$('.quick-navbar').show();
} else {
$('.quick-navbar').hide();
}
});
http://jsfiddle.net/daveSalomon/qefoLdwa/8/
错过了滚动部分 - 抱歉。
$(window).scroll(function(){ ... });
if(w > 768 && $(window).scrollTop() > 200){ ... }
关于javascript - 如何在滚动后显示固定但如果屏幕小于则隐藏它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33102441/