javascript - 将 JavaScript 滚动顶部更改为 id 或类而不是正文

Question

我有一个位于页面顶部的侧面菜单。我可以将其更改为 div、call 或 id，而不是使用正文来告知位置。

我当前的代码这段代码告诉侧边菜单在我从页面顶部滚动 40px 后根据类定位自身，如何更改它使其距 ID 或类 40px？

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

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 !!");
    }
}

Answer 1

我认为你最好的选择是获取滚动位置、具有相关 ID 的元素的偏移量，最后做一些快速数学计算。

var elOffset = document.getElementById('<ID HERE>').getBoundingClientRect();
function onScrollNav() {
    var diff = (document.documentElement.scrollTop - elOffset.top);
    if (diff > 40) {
        document.getElementById("mySidenav").className = "sidenavScroll";
        console.log("you hit 40px offset from the element with ID!!");
    } else {
        document.getElementById("mySidenav").className = "sidenavScrollReset";
        console.log("you back to 0 !!");
    }
}