Как сделать такую полосу прокрутки на сайте?

Как сделать такую полосу прокрутки?
Нужно чтобы при скролле полоса прокрутки сначала частично менялась по цвету, а потом, когда юзер залез на следующий блок больше чем на половину, ползунок должен плавно переползти на следующую часть скролла
5fb3d0e5c2689545516456.jpeg
5fb3d14025681841933790.jpeg
5fb3d146a2d71701959408.jpeg
5fb3d14c8b40a136581016.jpeg
  • Вопрос задан
  • 204 просмотра
Пригласить эксперта
Ответы на вопрос 2
Подарите дизайнеру сервый карандаш и попросить нарисовать цветную картину :)
Это к тому, дизайнер должен понимать принципы веб и такие вещи не придумывать, чтобы потом разработчики не страдали.

По теме – есть инверсия цветов, если цвета действительно черный и белый, плюс возможность управления отображением скроллбара. Может быть если совместить это, получится найти решение.

Есть второй вариант, это JavaScript, т.е. программировать цвет элементов, в том числе этого "перехода" скроллбара. Сложное решение чтобы описать словами, но если коротко, то писать свой скроллбар, этот ползунок делать как два элемента одинакового или разного цвета, и в зависимости от прокрутки менять их размер и цвет, получится эффект "перехода".

Вариант №3, опять же JavaScript, это реализация через canvas.

Вариант №4, и он самый лучший, это согласовать изменения в дизайне.
Ответ написан
nomorehero
@nomorehero
1. Научись работать с событием onscroll. Не научишься, не напишешь. Гугли событие и как работает. В буквальном смысле оно имеет число по кол-ву прокруток.
2. Научись отслеживать видимую зону. Если видимая зона находится на блоке X - то дать цвет прокрутке 1, если видимая зона Y - дать цвет 2.

Не научишься понимать эти вещи сам, напишешь херню)
Будут ошибки или вопросы - пиши тут.

Мог бы и демку накидать, но просто это не 5 минут, надеюсь сам понимаешь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы