Пытаюсь с помощью JS поменять цвет псевдоэлементов бургера меню при скроле. Как это сделать?

Question

[Snowfall_Zh]

Я поменял цвет лого и ссылок при скролле с помощью такого скрипта

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop < 50) {
    document.getElementById("logo").style.fontSize = "45px";
    document.getElementById("logo_a").style.color = "#fff";
    document.getElementById("menu__item-link").style.color = "#fff";

  } else {
    document.getElementById("logo").style.fontSize = "25px";
    document.getElementById("logo_a").style.color = "#000";
    document.getElementById("menu__item-link").style.color = "#000";
  }
}

А потом нашел такой способ просто менять цвета span и псевдоэлементов, но я не знаю как присобачить его к верхнему скрипту.

var burgerSpan = document.querySelector(".burger");
burgerSpan.style.setProperty("--burger-color", "#000");

.burger{
    &:before,
    &:after {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      background: var(--burger-color);
      transition: cubic-bezier(0.785, 0.135, 0.15, 0.86) .3s all;
    }

    &:before {
      top: 0;
    }

    &::after {
      bottom: 0;
    }

    &__span {
      position: absolute;
      top: 9px;
      right: 0;
      width: 100%;
      background: var(--burger-color);
      height: 2px;
      transform: scale(1);
      transition: cubic-bezier(0.785, 0.135, 0.15, 0.86) .3s all;
    }
}

И так, как заставить все это работать в верхнем скрипте, ну или в другом?

Comments

[Ankhena]

Почитайте про кастомные свойства CSS и меняйте их.
Либо меняйте класс элемента.

Вместо вот этого всего .style.color тоже гораздо удобнее манипулировать классами.

Answer 1

[FeST1VaL]

вы можете менять\добавлять классы и не надо будет столько кода

Comments

[Snowfall_Zh]

Вы имеете ввиду getElementByClass или что-то другое? А можно пример как это сделать?

[FeST1VaL]

Snowfall_Zh, научитесь разбивать задачу и гуглить ее по частям, просто если я скину код, то вы бездумно его поставите, а если будете гуглить, то со временем поймете какие решения вам подходят, а какие нет)

отвечая на первую часть вашего вопроса, нет getElementByClassName ищет элемент по классу, он вам тоже может пригодится чтобы найти ваш бургер
вам понадобится к примеру classlist и его методы toggle, add, remove

[Сергей delphinpro]

Snowfall_Zh,

.burder {
 // основные стили
}

.page-scrolled .burger {
  // Стили применяемые при скролле
}

и в скрипте нужна будет всего одна строка

function scrollFunction() {
  let condition = document.body.scrollTop > 50 //...;
  document.body.classList.toggle('page-scrolled', condition);
}

[Snowfall_Zh]

Сергей delphinpro, спасибо, я вот такую начал писать, пока ваш коммент не прочитал -

window.addEventListener('scroll', function(){
  let scrollPos = window.scrollY;

  if (scrollPos > 90) {
    header.classList.add('header--shrink');
    logo.classList.add('logo--shrink');
    menu__item-link.classList.add('menu__item-link--shrink');
  } else {
    header.classList.remove('header--shrink');
    logo.classList.remove('logo--shrink');
    menu__item-link.classList.remove('menu__item-link--shrink');
  }
});

Но почему-то на menu__item-link не вешается shrink класс, не знаете почему?

[FeST1VaL]

Snowfall_Zh, переменные с тирэшками нельзя использовать, ваша IDE должна была вам подчеркнуть это и сказать что тута ошибка!