JQuery ScrollTop 不适用于 Overflow

Question

在构建我的移动网站时，我必须将这些属性添加到我的正文中以消除多余的空白:

html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
}

但是，我的 jQuery scrollTop 函数(关于视差和导航栏)现在不起作用。这些功能不适用于移动设备。

$n = ".navbar";
$(window).scroll(function(){
    if($(window).scrollTop() > 300){
        $($n).css("background-color", "rgba(255,255,255,.2)");
    } else {
        $($n).css("background-color", "transparent");
    }
});

我已经尝试从正文中删除溢出，并将其仅保留在 HTML 上，反之亦然，这确实解决了我的问题，但是空白返回了。我在网上看过，但我似乎找不到任何关于这个问题的信息。

如果要查看网站，网址为http://studysesh.us . 请记住，这才刚刚开始，目前主页是唯一的页面。 谢谢。

Answer 1

通过删除 body 上的 height 属性解决了这个问题，这实际上相当于将 height 设置为 auto.

body {
   height: auto;
   max-width: 100%;
}

When you set a value to the height of the body explicitly, scrolling on any area over it would actually trigger scroll event inside the body itself, and not the window. In my opinion, this was the source of the problem with the scroll event not being fired.

与此同时， overflow-y: scroll; 在您的情况下是多余且不必要的，因为它会在视口(viewport)的宽度时在 body 上强制使用丑陋的滚动条显着减少。