Создание липкой навигации с использованием jQuery при использовании события resize для обновления значения высоты элемента

Question

Я создаю липкую навигационную панель. Я могу получить желаемые результаты, используя ваниль javascript, но хочу получить точно такие же результаты, но используя jQuery.

Вот мой рабочий ваниль javascript:

const header = document.querySelector("header");

function updateValuesOnResize() {
    const headerHeight = header.clientHeight || header.innerHeight;
    return headerHeight;
}

updateValuesOnResize();

window.addEventListener("resize", updateValuesOnResize);

const nav = document.querySelector("nav");

window.addEventListener("scroll", () => {
    if (window.pageYOffset >= updateValuesOnResize()) {
        nav.setAttribute("id", "stickyNav");
    } else {
        nav.removeAttribute("id", "stickyNav");
    }
});

Вот моя попытка воссоздать этот код с jQuery (который не работает):

    $(document).ready(function() {
    function updateValuesOnResize() {
        var headerHeight = $("header").height();
        return headerHeight;
    }

    updateValuesOnResize();

    $(window).resize(updateValuesOnResize);
    $(window).scroll(function() {
        var scrollPosition = $(this).scrollTop();
        if (scrollPosition >= updateValuesOnResize()) {
            $("nav").attr("id", "stickyNav");
        } else {
            $("nav").removeAttr("id");
        }
    });
});

Любая помощь очень ценится.