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

将JavaScript滚动顶部更改为ID或类，而不是正文

1 个答案: