删除移动设备的 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 检测您的设备视口宽度，并设置条件仅在宽度低于某个值时执行代码的 addClass 部分。

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