Как сделать, чтобы плавающее меню меняло background-color при прокрутке страницы?

Question

[Кристина]

Есть меню c position: sticky или fixed.
Как сделать, чтобы оно меняло background-color при прокрутке страницы?

Спасибо!

Comments

[Александр Лысенко]

Js, отслеживать позицию скролла и задать соответствующий цвет блоку

[Ankhena]

http://jquery.page2page.ru/index.php5/Работа_со_ск...

Answer 1

[twobomb]

Ну вот я примерно сделал для двух цветов, то есть получается градиент от одного до второго. По аналогии можно сделать и более. Результат

Comments

[Кристина]

Здорово!
Спасибо!

[Кристина]

А чтобы конкретно вначале был четко серый цвет, а потом черный, такое можно сделать?
Чтобы без градиента?

[twobomb]

KrisIris: Тоесть в начале страницы, в самом верху серый, а если хоть один раз скрольнуть ставился черный? Ну и если вверх вернутся опять серый?

[twobomb]

KrisIris: Ну смотри Вот так?- Это без градиента Но вот так с градиентом круче по моему

[Кристина]

twobomb:
Спасибо!
Согласна, круче!
Но задачу четкую поставили)

[Кристина]

Извини, что надоедаю!
Но +1000 к карме точно!))
просто только начинаю js осваивать

как еще добавить в этот скрипт, чтобы цвет шрифта у ссылок меню менялся?
он у меня черный изначально, на черном фоне чтобы белым становился

[twobomb]

KrisIris: Теперь можешь ставить любые свойства в CSS, классам bgColor1,bgColor2 , в коде js переменной ID_MENU нужно только задать id элемента на который это все будет действовать. Вот код

[Кристина]

Вы волшебник!)) спасибо большое!!

Answer 2

[Дмитрий Pacification]

Событие на скрол прописать, где по определенной логике указывать цвета.
Пример красивого изменения цвета можно посмотреть у Лебедева в логотипе: https://www.artlebedev.ru/