Поддержка Проблемы и решения Разные классы для хедера при скролле

  • Здравствуйте. Появилась проблема. Есть плавающий хедер. Но когда нету скролла ( Мы в начале страницы) текст сливается с слайдером. Хотел сделать так что бы в начальном состоянии тексты был белый, а когда скролим — текст в хедере черный. Поскольку текст в одном классе — разные стили к тексту в хедере поставить не могу.
    Возможно кто то подскажет как воплотить в реальность идею.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Поскольку текст в одном классе

    Не совсем. Классы section с хедером меняются при скролле
    с
    header-site header-sticky header-overlay header-left
    на
    header-site header-sticky header-overlay header-left is_stuck is_stuck_show

    Спасибо. Сейчас попробую переписать стили.
    Я думал создавать Window.addEventListener(‘scroll’, () => {}) и слушать когда скрол 0 подтягивать один класс, а если больше 0 то другой класс.

    .nav li a {
        color: white !important;
    }
    
    .is_stuck_show .nav li a {
        color: black !important;
    }
    .nav li.current_page_item a {
        color: #c73112 !important;
    }

    С меню работает супер, а вот с названием почему-то не хочет работать(

    .sitename sitetitle a{
    	color: white !important;
    }
    • Ответ изменён 3 года, 8 месяцев назад пользователем stasps.

    с названием почему-то не хочет работать

    .site-description .sitename.sitetitle a {
        color: white !important;
    }
    .is_stuck_show .site-description .sitename.sitetitle a {
        color: black !important;
    }

    .sitename sitetitle a

    точки нет
    .sitename.sitetitle a

    Да! Все работает круто!
    Благодарен!

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Тема «Разные классы для хедера при скролле» закрыта для новых ответов.