Условие прокрутки всегда возвращает True, как исправить?

Question

[hihihahahoho]

Есть скрипт, который считает высоту хэдера и прокрутку по нему, но он не делает второго и всегда возвращает True, в чем может быть проблема?

window.onscroll = function() {

        var up = document.getElementById('up');
        var header = document.getElementById('header');

        if (header.scrollHeight - header.scrollTop  === header.clientHeight) {
            if( up != 'undefined') {
                up.classList.remove('d-none');
            }
        }   else {

            if( up != 'undefined') {
                    up.classList.add('d-none');
             }
        }

}

Answer 1

[Stalker_RED]

let isScrolled = scrollableElem.scrollTop > header.clientHeight;
button.classList.toggle('show', isScrolled)

Answer 2

[Moses Fender]

header.scrollTop ничего не покажет, так как это измерение скролла контента блока, то есть того, что скроллится внутри него.

Используй getBoundingClientRect();

let bounds = header.getBoundingClientRect();
// в bounds есть x, y, width, height элемента

Answer 3

[hihihahahoho]

Мне помог ответ Stalker_RED, спасибо ему большое!
Неверно сравнивал переменные, поэтому не получалось.
В итоге мой код принял такой вид.

window.onscroll = function() {

        var up = document.getElementById('up');
        var header = document.getElementById('header');

        var scrolled = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

        var is_header_scrolled =  scrolled  > header.clientHeight;

        if ( is_header_scrolled == true) {
            if( up != null ) {
                up.classList.remove('d-none');
            }
        }   else {

            if( up != null ) {
                    up.classList.add('d-none');
             }
        }

}