CODEWITHSUNDEEP
javascripthtmlcssscrollhover
nicolemarie
nicolemarie

Reputation: 21

Why is this not changing color after scrolling? CSS/Javascript

I am creating a header that, after scrolling, does a variety of things using CSS and Javascript. I must just be overlooking something that is preventing the underline on hover from changing from black to white after scrolling. It is supposed to always be the same color as the links. Here's the link to see: http://www.exploreloudoncounty.com/

Any ideas? Thanks!

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');
    }

Upvotes: 0

Views: 66

Answers (3)

avcajaraville
avcajaraville

Reputation: 9084

I would like to complement @Kjvhout answer.

That solution works only for the first link due to the wrong selector on the JS part.

In order to fix it, I would do the following:

  • Remove the JS altogether, if you inspect the dom, you can see that the header contains already a sticky class, so no need to add a new one to the anchors.
  • Rewrite the CSS to match this DOM structure, something like this should work:
.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;
}

This should solve the issue and would be a better solution as you can get rid of the unused JS part.

The reason why @Kjvhout answer was working only for the first is the JS part, your selector document.querySelector('.nav__link') is only selecting one HTMLElement, to get all the collection you should use document.querySelectorAll('.nav__link') and then iterate over this collection and apply the corresponding class.

But as I said earlier, my solution is simpler as you don't need to deal with JS.

Upvotes: 0

bdbdbd
bdbdbd

Reputation: 493

What errors do you get if you open console (by pressing F12)? Because if this is your complete JS, then you'll be getting scrollPosition is undefined.

The source you linked has this JS and you see they declare it at the beginning as:

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

They also wrapped it in a lodash function called _.throttle, but you can acieve the same with setTimeout, it just makes sure the function gets called every now and then (here 300 milliseconds).

Upvotes: 0

Kjvhout
Kjvhout

Reputation: 494

You should change your css to this:

.nav__link.sticky::after

This because the .sticky class is in the same element as .nav__link.

And if you want to use the a element in your styling you should put this at the front of the code, like this:

a.nav__link.sticky::after

This because the classes are located within this element so the element has to be in front.

Upvotes: 1

Related Questions