我将导航菜单设置为显示:无,该菜单在滚动时出现,并在回到顶部时消失。
一旦到达某个断点(例如,最大宽度:786px)并显示菜单,是否可以禁用滚动功能?
Java脚本
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('show');
}
else {
$('nav').removeClass('show');
}
})
的CSS
.show {
display: block
}
最佳答案
您可以使用javascript或CSS来解决此问题,但是我个人会使用javascript。
首先,对于javascript解决方案,您需要的功能是:
window.innerWidth
它将返回整个窗口宽度,不包括滚动条。详细了解here。
因此,按照Temani Afif的建议,您可以在滚动功能内编写一个测试,以检查所需的窗口宽度,如下所示:
$(window).on("scroll", function() {
if (window.innerWidth <= 786) return;
// Your other code here
})
对于纯CSS解决方案,您可以使用媒体查询覆盖“ show”类的效果:
.show {
display: block
}
@media screen and (max-width: 786px) {
nav {
display: block !important
}
}
有关媒体查询的更多信息here