How do I modify a class based on whether the page is scrolled to the top or not?

Question

I want to add a class to an HTML element when the user scrolls away from the top of the page and then remove that class when the user returns to the top of the page. I presume JavaScript is the best way of achieving this, but don't know how.

For example in the demo, the text class to be "red" when scrolled to the top and "blue" when anywhere but.

DEMO

CSS

.red {
  color:red;
}
.blue {
  color:blue;
}

HTML

<br>
<br>
<br>
<br>
<br>
<p  id="changeme" class="red">Text</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Possible duplicate of [Javascript detect browser scroll to the top?](https://stackoverflow.com/questions/16422124/javascript-detect-browser-scroll-to-the-top) — Zak, May 02 '18 at 18:45
I still maintain my downvote as the question does not contain a *a Minimal, Complete, and Verifiable example* --> https://stackoverflow.com/help/mcve — Zak, May 02 '18 at 18:54
That seems a tiny bit harsh, it remains a clear and answerable question, no? — Sam, May 02 '18 at 19:00
@Sam -- It is answerable, and *has* been answered. -- If the OP used a little research -- view @Jonathan Brizio's answer on the dupe link I provided .. A simple `else` statement would get the OP the answer he's looking for. — Zak, May 02 '18 at 19:03
Hi Zak, I've put some code in there. Hope this satisfies you, sir. — Michael Ruta, May 02 '18 at 19:04
@Zak I'm with you, I guess I just wasn't sure it was worth the down vote. You're not wrong though. — Sam, May 02 '18 at 19:06
@MichaelRuta Our_Benefactors hooked you up, that's all you need. You can test it right in the Chrome dev tools — Sam, May 02 '18 at 19:07
Modified the question further. It's worthing knowing I'm a complete novice on JavaScript. I guess the issue for me is also modifying the class accordingly, as well as the if statement. Sorry I've confused anyone - it's difficult to ask a question when I don't even know where to start... — Michael Ruta, May 02 '18 at 19:10

Our_Benefactors · Accepted Answer · 2018-05-10T15:33:19.357

2

You can get the current scroll position of the page with window.scrollY

You need to add an event listener for the scroll event with some logic for the cases where window.scrollY === 0 and window.scrollY > 0

So add the event listener and bind the function that adds or removes classes.

window.addEventListener("scroll", runOnScroll);

function runOnScroll() {
    if (window.scrollY === 0) {
        //do stuff for being at the top of the page
    } else if (window.scrollY > 0) {
        //do stuff for not being at the top of the page
    }
}

If you are struggling with how to fill in the commented sections of the code sample above, please make another question about how to manipulate HTML elements with javascript.

edited May 10 '18 at 15:33

answered May 02 '18 at 18:51

Our_Benefactors

3,220
3
21
27

Hey, thanks answering. I've tried it here but I'm doing something wrong http://jsfiddle.net/043fvxe5/2/ – Michael Ruta May 02 '18 at 19:16
Nevermind, it was just missing a '(' on line 6. Thank you :D – Michael Ruta May 02 '18 at 19:24

score 0 · Answer 2 · answered May 02 '18 at 19:01

Here is one implementation that uses document.documentElement.scrollTop to get the scroll position of the document.

(()=>{
let toAttach = document.querySelector('.toAttach')

  window.addEventListener('scroll', function(){
    let scrollPos = document.documentElement.scrollTop;

    if(scrollPos < 1){
      toAttach.classList.add('attached')
    } else {
      toAttach.classList.remove('attached')
    }
  })  
})()

Note: The initial state does not have the class but the next time to scroll to the top the class will trigger

score 0 · Answer 3 · answered May 02 '18 at 19:33

I will give you a complete answer here.... Combining your needs with @Our_Benefactors answer. You can view the complete snippet:

The things addressed are

The detection of the area during scroll event
Getting your element by id and storing it in a variable
Removing a class from said variable
Adding a class to said variable

window.addEventListener("scroll", runOnScroll);

function runOnScroll() {
    if (window.scrollY === 0) {
        //alert('top');
        var element = document.getElementById("changeme");
      element.classList.remove("blue");
        element.classList.add("red");
    } if (window.scrollY > 0) {
       //alert('not top');
       var element = document.getElementById("changeme");
      element.classList.remove("red");
        element.classList.add("blue");
    }
}

.red {
  color:red;
}
.blue {
  color:blue;
}

<br>
<br>
<br>
<br>
<div id="changeme" class="red">
CHANGE ME
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

How do I modify a class based on whether the page is scrolled to the top or not?

3 Answers3