JS30. Задание 24 Sticky Nav

Демо: https://js3024.github.io/
Код: https://github.com/js3024/js3024.github.io

Цель - создать на js навигационную панель, прилипающую к верхней части окна
Навигационная панель расположена ниже шапки сайта. При прокрутке вниз, когда навигационная панель попадет в верхней части экрана, он должен переход на фиксированное положение в верхней части браузера.

Теперь, когда мы знаем, что мы хотим достичь, можем приступить к работе.

Для начала нам нужно будет выбрать навигационную панель. Также необходимо добавить функцию, которая будет выполняться при каждом событии прокрутки:

var nav = document.querySelector("#nav");

function fixNav() { 
  console.log("The window was scrolled")
}

window.addEventListener("scroll", fixNav);

Теперь нам нужно определить расстояние навигационной панели от верха страницы:

var topOfNav = nav.offsetTop;

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

Теперь, когда у нас есть это расстояние, мы можем добавить логику в нашу fixNav функцию, которая выполняется на каждом событии прокрутки. Добавляем новый класс "fixed-nav" к body, если высота прокрутки window.scrollY больше или равна расстоянию навигационной панели от верха страницы.

function fixNav() {
    if(window.scrollY >= topOfNav) {
        document.body.classList.add("fixed-nav");
    } else {
        document.body.classList.remove("fixed-nav");
    }
}

Если важна поддержка IE и Safari, свойство window.scrollY лучше заменить на window.pageYOffset

Класс .fixed-nav можно добавить любому элементу страницы следующим образом:

.fixed-nav nav {
  position: fixed;
  box-shadow: 0 5px rgba(0, 0, 0, 0.1);
}

В этом примере мы добавили класс .fixed-nav навигационной панели. Добавление этого класса фиксирует навигационную панель вверху страницы. Но так как зафиксированные элементы выпадают их потока, их высота равна нулю. Как только панель фиксируется, остальная часть страницы подпрыгивает вверх на высоту навигационной панели. Чтобы этого не происходило, нам нужно добавить отступ сверху, равный высоте навигационной панели:

function fixNav() {
    if(window.scrollY >= topOfNav) {
        document.body.style.paddingTop = nav.offsetHeight + "px";
        document.body.classList.add("fixed-nav");
    } else {
        document.body.classList.remove("fixed-nav");
        document.body.style.paddingTop = 0;
    }
}

Также во время прокрутки у нас немного меняется вид навигационной панели: слева у неё появляется логотип

Стиль логотипа:

li.logo { 
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all 0.5s;
  font-weight: 600;
  font-size: 30px;
}

Добавим логотипу класс .fixed-nav:

.fixed-nav li.logo {
  max-width: 500px;
}

Теперь его ширина равна 500рх и логотип становится виден.

Последний штрих: добавим класс .fixed-nav обёртке, чтобы немного её увеличить при прокрутке, когда панель становится фиксированной


Было:

.site-wrap {
  ...
  transform: scale(0.98);
  transition: transform 0.5s;
}

Стало:

.fixed-nav .site-wrap {
  transform: scale(1);
}

Это очень небольшое изменение размера добавляет странице эффект завершённости .