如果额外弹出div JavaScript，请滚动顶部刹车

Question

我有一个固定的左侧弹出导航栏，在滚动时它将对齐方式设置为顶部，我使用以下JavaScript和CSS进行此操作。

CSS

    .sidenav {
    height: 100%;
    position: fixed;
    width: 0;
    z-index: 99;
    top: 96px;
    left: 0;
    background-color: #f0f1f3f2;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 50px;
}

.sidenavScroll {
height: 100%;
width: 0;
position: fixed;
z-index: 99;
top: 0;
left: 0;
background-color: #f0f1f3f2;
overflow-x: hidden;
/*transition: 0.5s;*/
padding-top: 50px;
}

JavaScript

 function onScrollNav() {
   if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
        document.getElementById("mySidenav").className = "sidenavScroll";
        console.log("you hit 40px !!");
    } else {
        document.getElementById("mySidenav").className = "sidenavScrollReset";
        console.log("you back to 0 !!");
    }
}

这很好，除非弹出一个cookie或类似的东西，否则它会将所有内容向下推，并且由于我的位置固定，因此侧面导航现在位于向下推时位于主顶部导航上方。 我的主标题有一个 ID top-nav。

我相信，如果我可以为top-nav Id 设置滚动，则可以使用。

我如何尝试

window.onscroll = function () {onScrollNav()};

    function onScrollNav() {
       if (document.getElementById("top-nav") > 40 || document.documentElement.scrollTop > 40) {
            document.getElementById("mySidenav").className = "sidenavScroll";
            console.log("you hit 40px !!");
        } else {
            document.getElementById("mySidenav").className = "sidenavScrollReset";
            console.log("you back to 0 !!");
        }
    }