Как исправить ошибку header.js:4 Uncaught TypeError: Cannot read property 'top' of undefined?

Question

[Максим js]

Нужно было сделать заливку шапки после прохождения 4 секций на сайте. Сделал но вылазит ошибка в консоле браузера причем на другой странице совсем и ломает верстку на ней. Что не так то?

const transparent = $('.header-transparent').offset().top;
const grey = $('.header-grey').offset().top;

$(document).scroll(function () {
    const scrollPos = $(document).scrollTop();
    if (scrollPos >= transparent && scrollPos < grey) {
        $('.header').addClass('header-transparent');
        $('.header').removeClass('header-grey');
    } else if (scrollPos >= grey) {
        $('.header').removeClass('header-transparent');
        $('.header').addClass('header-grey');
    }
});

в html на 4 секции добавил класс 'header-transparent' где шапка прозрачная и на 2 'header-grey' где с заливкой

Answer 1

[Андрей]

Судя по всему Вы пытаетесь прочитать значение top у несуществующего элемента

Comments

[Максим js]

Дошло, ошибка же вылазит на других страницах, а там нет этих секций) а как тогда решить эту проблему?