Смена логотипа при скролле, как реализовать?

Question

[enerjze]

Подскажите пожалуйста, имеется скрипт который меняет меню при скролле страницы, он добавляет класс scrolled в css, как реализовать, что при включении .scrolled работала другая картинка? При открытии страницы logo1.png при скролле Logo2.png
Вот сайт
Я так понимаю, нужно дописать скрипт?

Comments

[shmatuan]

Я так понимаю, нужно дописать скрипт?

да, отлавливать скролл и менять если scrollTop !== 0

Answer 1

[Николай Миронов]

Если логотипы находятся внутри div, к которому добавляется класс scrolled, то можно решить все цссом, если нет, тогда надо добавить в скрипт добавление класса scrolled для обертки логотипов

А CSS для смены логотипов при добавлении класса scrolled такой:

.logo-1 {
  display: block;
}

.logo-2 {
  display: none;
}

.scrolled .logo-1 {
  display: none;
}

.scrolled .logo-2 {
  display: block;
}

Comments

[enerjze]

так и сделал, добавил в Html вторую картинку, а ксс закрыл её когда нет скролла и наоборот.

Answer 2

[Антон]

Сделайте спрайт. Без scrolled будет background-position соответствующий базовой картинке, а в scrolled background-position будет смещаться на вторую