Как изменить цвет фона селектора псевдо при прокрутке вниз

Question

Я изо всех сил пытался найти способ выбрать псевдоэлементы в JS, чтобы изменить его цвет при прокрутке пользователя.

Если быть более точным, я работаю над фиксированной панелью навигации, которая меняет цвет фона и цвет текста при прокрутке. Но мне нужно изменить псевдоселектор на другой цвет при прокрутке. Это то, что я использую для всех других элементов (я знаю, что это очень избыточно, но пока это просто прототипирование, пока я не получу контроль над манипуляциями с JS и DOM).

$(document).ready(function() {
var removeColor = $('.navigation__item');
var posColor = removeColor.position();
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= posColor.top & windowpos >=1) {
        removeColor.insertRule('header__navigation--change');
    } else {
        removeColor.removeRemove('header__navigation--change');
    }
});
});

CSS:

nav.header__navigation a{
color:#fff;
font-size:1em;
text-decoration:none;
    text-transform: uppercase;
display:block;
padding: 0.6em 0;
letter-spacing: 0.08em;
@include for-desktop-up {
  color:#fff;
  font-size:0.7em;
  text-decoration:none;
  text-transform: uppercase;
  display:block;
  margin-top: 0.5em;
  line-height: 0;
  font-weight:300;
};
}
nav.header__navigation li::after {
    @include for-desktop-up {
      content: "";
      display: block;
      width: 0;
      height: 3px;
      background-color: #fff;
      transition: width .3s;
      margin-top: -15px;
    };
}
nav.header__navigation--change li::after {
    @include for-desktop-up {
      content: "";
      display: block;
      width: 0;
      height: 3px;
      background-color: #000;
      transition: width .3s;
      margin-top: -15px;
    };
}
nav.header__navigation a:hover{
        text-decoration: none;
}
nav.header__navigation li:hover::after{
    width: 100%;
}

Спасибо за любой вклад!