Почему это не меняет цвет после прокрутки?CSS / Javascript

Question

Я создаю заголовок, который после прокрутки делает разные вещи, используя CSS и Javascript.Я просто должен пропустить что-то, что мешает подчеркиванию при наведении поменять цвет с черного на белый после прокрутки.Предполагается, что он всегда будет того же цвета, что и ссылки.Вот ссылка, чтобы увидеть: http://www.exploreloudoncounty.com/

Есть идеи?Спасибо!

HTML:

    <a class="nav__link" href="https://www.exploreloudoncounty.com/explore">Explore</a>
    <a class="nav__link" href="https://www.exploreloudoncounty.com/join">Join</a>
    <a class="nav__link" href="https://www.exploreloudoncounty.com/about">About</a>
    <a class="nav__link" href="https://www.exploreloudoncounty.com/contact">Contact</a>

CSS:

.nav__link {
    margin-right: 1em;
    font-size: 1em;
    color: #000;
    text-decoration: none;
    transition: 0.4s;
    display: inline-block;
}

.nav__link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width .3s;
}

.nav__link:hover::after {
    width: 100%;
}

        .nav__link.sticky a {
            margin-right: 1em;
            font-size: 1em;
            color: #fff;
            text-decoration: none;
            transition: 0.4s;
            display: inline-block;
        }

        .nav__link::after.sticky a {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #fff;
            background-color: #fff;
            transition: width .3s;
        }

        .nav__link:hover::after.sticky a {
            width: 100%;
        }

JS:

    if (scrollPosition > 100){
        document.querySelector('.nav__link').classList.add('sticky');
    }
    else {
        document.querySelector('.nav__link').classList.remove('sticky');
    }

Answer 1

Вы должны изменить свой CSS следующим образом:

.nav__link.sticky::after

Это потому, что класс .sticky находится в том же элементе, что и .nav__link.

И если вы хотите использоватьЭлемент a в вашем стиле вы должны поместить в начало кода, например:

a.nav__link.sticky::after

Это потому, что классы расположены внутри этого элемента, поэтому элемент должен быть впереди.

Answer 2

Я хотел бы дополнить ответ @Kjvhout.

Это решение работает только для первой ссылки из-за неправильного селектора в части JS.

Чтобы исправить это, я бы хотелвыполните следующее:

• Удалите JS в целом , если вы осмотрите dom, вы увидите, что заголовок уже содержит липкий класс, поэтому нет необходимости добавлять новыйякорям.
• Перепишите CSS, чтобы он соответствовал этой структуре DOM, что-то вроде этого должно работать:

.sticky .nav__link:after {
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  background-color: rgb(255, 255, 255);
  color: #fff;
  background-color: #fff;
  transition: width .3s;
}

Это должно решить проблему и будет лучшим решением для васможет избавиться от неиспользованной части JS.

Причиной, по которой ответ @Kjvhout работал только для первой, является часть JS, ваш селектор document.querySelector('.nav__link') выбирает только один HTMLElement, чтобы получить всю коллекцию, которую вы должныиспользуйте document.querySelectorAll('.nav__link'), а затем переберите эту коллекцию и примените соответствующий класс.

Но, как я уже говорил ранее, мое решение проще, так как вам не нужно иметь дело с JS.

Answer 3

Какие ошибки вы получите, если откроете консоль (нажав F12)?Потому что если это ваш полный JS, то вы получите scrollPosition не определено.

Источник, который вы связали, имеет этот JS , и вы видите, что они вначале объявляют его как:

let scrollPosition = Math.round(window.scrollY);

Они также обернули его в функцию lodash, называемую _.throttle, но вы можете добиться того же с помощью setTimeout, он просто гарантирует, что функция вызывается время от времени (здесь 300миллисекунды).