Изменение цвета/эффекта навигационной панели после прокрутки

Фиксированная панель навигации — важная и удобная функция при использовании веб-сайтов.

// Make navbar transparent when it is on the top
const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;

window.addEventListener('scroll', function() {
       // add padding top to show content behind navbar
      if (window.scrollY > navbarHeight) {
        navbar.classList.add('navbar--dark');      //adding CSS effect
       // remove padding top from body        
      } else {
        navbar.classList.remove('navbar--dark');  // removing CSS effect
      } 
  });

При прокрутке

1–1) Используйте — addEventListener («прокрутка»)

// Use Scrolling Event : 'scroll'
window.addEventListener('scroll',e=>{
 // Add function when scrolling
});

1–2)Использование — scrollY :scrollY — это свойство окна, доступное только для чтения. Таким образом, он сообщает нам, сколько вертикальных прокруток произошло в пикселях.

document.addEventListener('scroll;, ( ) => { console.log(window.scrollY); }); 

Измените элементы пользовательского интерфейса, когда панель навигации опущена по высоте

2–1) Поиск navbarHeight: используйте getBoundingClientRect()

Метод Element.getBoundingClientRect() возвращает объект DOMRect, предоставляющий информацию о размере и положении элемента относительно окна просмотра.

• const navbar = document.querySelector('#navbar');
• -› Определите и узнайте, что такое панель навигации
• const navbarHeight = navbar.getBoundingClientRect().height;
• -> Определите, что такое navbarHeight / Добавьте .height, чтобы получить значение высоты в getBoundingClientRect()
• console.log(`navbarHeight: ${navbarHeight}`);
• -› Проверить с помощью navbarHeight console.log

2–2) Замените элементы пользовательского интерфейса

-› Добавляйте/удаляйте эффекты CSS, используя classList.add и classList.delete

navbar.classList.add('navbar--dark');
navbar.classList.remove('navbar--dark');