Как сделать плавающее (липкое) меню на сайте с помощью Javascript

В настоящее время практически на всех сайтах есть меню, прилипающее к верху экрана при прокрутке. Это значительно улучшает пользовательский опыт, поэтому необходимо уметь быстро и легко реализовывать эту логику используя CSS и Javascript.

Начнем с HTML разметки:

Сделаем так, чтобы прилипал элемент nav, который будет служить меню. Добавим стили:

/* Сбросим дефолтные отступы для демонстрации */
body{
    margin: 0;
    padding: 0;
}

.header{
    background: #FFFACD;
    width: 100%;  
    height: 100px;
}
.nav{
    background: #87CEEB;
    width: 100%;
    height: 50px;
}
.main{
    background: #AFEEEE;
    width: 100%;
    height: 150vh;
    display: block;
}

/* Будем присваивать этот класс, чтобы блок прилипал */
.sticky{
    position: fixed;
    top: 0;
}

/* Добавляем отступ равный высоте меню к контенту */
.sticky + .main{
    padding-top: 50px;
}

А теперь реализуем логику на Javascript:

window.onscroll = function() {
    checkMarginToTop();
};

var nav = document.getElementById("nav");

var sticky = nav.offsetTop;

function checkMarginToTop() {
        if (window.pageYOffset > sticky) {
        nav.classList.add("sticky");
    } else {
        nav.classList.remove("sticky");
    }
}

Теперь наш скрипт определяет расстояние от верха меню до верха окна и когда это расстояние становится равным 0 присваивает класс sticky элементу nav.