Измените верхнюю часть прокрутки JavaScript на id или класс, а не на тело

Question

У меня есть боковое меню, которое прилипает к верхней части страницы.вместо того, чтобы использовать тело для определения позиции, я могу изменить его на div, call или id.

Мой текущий код этот код говорит боковому меню, чтобы он позиционировал себя в соответствии с классом один разя прокрутил 40px из верхней части страницы, как я могу изменить его так, чтобы 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

Я думаю, что вам лучше всего получить позицию прокрутки, смещение элемента с указанным идентификатором и, наконец, выполнить несколько быстрых вычислений.

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