如何使用 vanilla Javascript 在滚动时更改标题的背景颜色

Question

I'm currently attempting to change the background colour of my header when the user scrolls but it doesn't seem to be working. I have attached an onscroll attribute to the body tag and created the appropriate function in Javascript to no avail. Here is the JSFiddle: https://js fiddle.net/Le7jctz8/

Answer 1

Solution

One possibility is to add an event listener to your document body and listen for scroll events and check the Y position of the document as the user scrolls.

Code

var header = document.getElementById('header');
var oldColor = header.style.backgroundColor;

document.body.addEventListener('scroll', () => {
    let yPosition = document.body.scrollTop;
    if (yPosition > 100) {
        header.style.backgroundColor = "teal";
    }
    else {
        header.style.backgroundColor = oldColor;
    }
})

Here is a JSFiddle for visual clarity.

https://jsfiddle.net/5hpr7kos/37/

I hope this helps.