Vanilla JS – change/add class based on scroll position.

change-class-on-scroll.html

// https://codepen.io/cmykw/pen/gemxJm

// layout
<nav/>

// style
<style>
  body { min-height: 200vh; }

  nav {
    --ease: all 300ms ease;
    position: fixed;
    background: pink;
    height: 72px;
    width: 100%;
    opacity: 0.2;
    transition: var(--ease);
  }

  nav.fade-in { opacity: 1; }
</style>

// logic
<script>
  let scrollpos = window.scrollY
  const header = document.querySelector("nav")
  const header_height = header.offsetHeight

  const add_class_on_scroll = () => header.classList.add("fade-in")
  const remove_class_on_scroll = () => header.classList.remove("fade-in")

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

    if (scrollpos >= header_height) { add_class_on_scroll() }
    else { remove_class_on_scroll() }

    console.log(scrollpos)
  })
</script>

Working fine, Thanks

thanks man! Worked perfectly.

Awesome!!!

thanks a lot!

Where can I set the scroll height to add the class?

thanks!

Deu certo, obrigado

Great stuff, thanks for sharing!

Thank you!

Very useful, @ohiosveryown, thank you!

Thanks a lot!!

Works great! Thanks a lot!

What kind of license is this under? Do I have to mention something anywhere, when using the javascript part? I'm new to github/gist.

Works great! Thanks a lot!

What kind of license is this under? Do I have to mention something anywhere, when using the javascript part? I'm new to github/gist.

Feel free to use wherever and however you'd like. All open source here 👍.

Works great! Thanks a lot!
What kind of license is this under? Do I have to mention something anywhere, when using the javascript part? I'm new to github/gist.

Feel free to use wherever and however you'd like. All open source here 👍.

Awesome! Thanks again!