Задача: Интерактивен Scrollbar

Най-важното: контролирай скрола и анимациите според видимата част на екрана

Целта е да създадеш интерактивно меню, което при клик плавно премества към съответната секция от страницата. Скролът трябва да бъде анимиран, а не рязък. Допълнително – елементите се анимират само когато са видими на екрана, а стандартният scrollbar се заменя с по-интерактивен и стилен вариант.

Стъпка по стъпка: какво трябва да реализираш

1. Създай меню с линкове към различни секции на страницата.
2. При клик върху меню елемент, реализирай плавно скролиране до съответната секция.
3. Добави логика, която проверява дали даден елемент е във видимата част на екрана.
4. Стартирай анимацията на елемент (например с точки) само когато той е видим.
5. Спирай анимацията, когато елементът излезе извън екрана.
6. Замени стандартния scrollbar с персонализиран такъв, който:
   • има hover ефект
   • може да се „хваща“ и мести
   • запазва стандартното скролиране с мишката

Ключови JavaScript инструменти

• addEventListener() – за обработка на клик и scroll събития
• scrollIntoView() – за плавно преместване към секция (с опция { behavior: "smooth" })
• window.scrollY – текуща позиция на скрола
• getBoundingClientRect() – проверка дали елемент е във видимата част
• classList.add() / classList.remove() – включване и изключване на анимации

Задача

Изгради завършено интерактивно меню с плавен скрол, анимации при видимост и персонализиран scrollbar. Тествай поведението при различна височина на прозореца и при бързо скролиране.