Не пойму почему jquery код не работает на странице, но работает в консоли?

Question

[EugeneNB]

Приветствую!

Добавил на страницу такой код:

jQuery(document).ready(function () {
    let navHeader = $('.header-nav');
    let btnTop = $('.scroll-to-top');
   
    $(window).scroll(function () {
        if ($(window).scrollTop() > $('.header').height()) {
            btnTop.fadeIn();
            navHeader.addClass('fixed-header');
        } else {
            btnTop.fadeOut();
            navHeader.removeClass('fixed-header');
        }
    });

    btnTop.on('click', function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, '300');
    });
});

Участок отвечающий за кнопку с классом scroll-to-top отрабатывает нормально, а вот добавление класса fixed-header к header-nav не срабатывает. Хотя если выполнить этот код в консоли браузера, то все работает... Не пойму в чем может быть проблема?

Comments

[Anonimmus]

Обычно на ошибке выполнения скрипт завершается.
Условие не прошло вот и результат.

Обратите также внимание на
$('.header').height() ;
Попробуйте указать явную длину.

Разница между .css ('height') и .height () заключается в том, что последний возвращает значение пикселя без единиц измерения (например, 400), а первый возвращает значение с неизменными единицами измерения (например, 400 пикселей). Метод .height () рекомендуется, когда высоту элемента необходимо использовать в математических вычислениях.

[EugeneNB]

Anonimmus, я просто совсем новичок в этом, но в блоке if два действия и одно из них выполняется, значит условие проходит... Но почему то второе не выполняется...
Уже кучу раз проверил правильность написания классов и кода вообщем, ошибок не заметил да и из консоли оно выполняется правильно.
Можеают в обёртке проблема jQuery(document).ready
Хотя пробовал разные, изменений не было..

Answer 1

[Anonimmus]

попробуйте так

scrollPrev = 0;
$(window).scroll(function () {
	var scrolled = $(window).scrollTop();
	if (scrolled > $('.header').height() && scrolled > scrollPrev) {
		header.addClass('fixed-header');
	} else {
		header.removeClass('fixed-header');
	}
	scrollPrev = scrolled;
});