jquery - 删除移动设备的 ScrollTop 功能的问题

Question

我在响应式设计方面遇到了一些困难 我的网站的桌面版本有一个粘性导航栏效果，这是完美的，但是在移动设备上，粘性导航栏阻碍了用户体验。当我向下滚动时，导航栏会正常显示，但粘性导航的背景颜色会阻碍屏幕上文本的可见性。我确实希望粘性导航的背景颜色仅在用户选择移动汉堡包图标时出现，而不是在它向下滚动时出现，这很烦人。提前感谢您的帮助。

我试图将类设置为不显示，但这确实有效，但是当我只想禁用粘性导航栏背景时，它会同时禁用桌面和移动设备上的粘性导航栏背景，仅当用户滚动时才禁用粘性导航栏背景。选择汉堡包图标时出现。

js

$(window).on("scroll", function() {
    if ($(window).scrollTop()) {
        $('nav').addClass('lightgrey');
    } else {
        $('nav').removeClass('lightgrey');
    }

});

CSS

nav.lightgrey {
         height: 400px;
        }       

预期的结果是允许代码中名为 nav.lightgrey 的类仅在用户选择移动汉堡包时显示。

Answer 1

您可以使用 CSS 媒体查询将导航栏的显示设置为仅在移动设备上不显示。

否则，使用 javascript 检测您的设备视口(viewport)宽度，并执行条件以仅在宽度低于特定值时执行代码的 addClass 部分。

if (window.innerWidth > 420) {
  ...do stuff
}