当我的整个页面有'position: absolute'时，如何检查我是否在顶部？

Question

我在网站顶部有一个主菜单，当用户滚动时，它会发生变化并变得更加紧凑。

我是通过检查滚动事件以及我们是否在顶部来实现的。这是是工作的代码：

/*Defines how the 'main menu' will be displayed when we scroll down (if) and how it will fallback to original look when we're up again (else)*/
$(document).ready(function(){   
    if ($(window).width() > 480){                //not on mobile, then:
    $(window).bind('scroll', function () {
    if ($(window).scrollTop() > 0) {
        $('.visible-bar-container').css("position", "fixed");
        $("#white-logo").css("display", "none");
        //...etc

    } else {
        $('.visible-bar-container').css("position", "absolute");
        $("#spread-out-menu").css("display", "flex");
        //...etc
        }
    });
    }
});

在项目中期，客户决定他希望主页的部分具有 'smooth scroll'。长话短说，我在给整个主页一个 CSS 的位置后设法做到了：绝对。

以防万一，这是添加到我主页的整个 CSS（位于 id='main' 的元素内）：

#main {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}

问题是现在，js代码不再有效了。（我相信当整个页面都具有绝对位置时，检查滚动事件不再有效-？）。那么，如何检查用户是否已滚动？

我可能会尝试检查用户是否已经移动过第一部分（通过查看 div 在视口中是否可见），但我希望菜单在我们开始向下移动时变得紧凑，而不是在我们开始向下移动之后整个部分已被移过去。那么在这种情况下有没有办法检查滚动？

Answer 1

我是 OP - 所以 Sim1-81 在上面的评论中提供了答案。诀窍是更改 javascript:

中的第三行和第四行

...
 $("#main").bind('scroll', function () {
    if ($("#main").scrollTop() > 0) {
...

在我的例子中，#main 是我设置为 'position: absolute' 的页面的 ID。

当我的整个页面有'position: absolute'时，如何检查我是否在顶部？

When my whole page has 'position: absolute', how do I check if I am at the top or not?

javascript

jquery

fixed

absolute