CSS/ jQuery change background on scroll

Question

Anybody knows how that works? I want to change the background-color of a fixed header when the page is scrolled. One way to do that is to add a class after the page is scrolled (e.g. after 100px). But then the header will change the background exactly after scrolling 100px. What I want is a bit more tricky. On each pixel it should be e bit more or less of the change.

80px scrolled rgba(0, 0, 0, 0.10) 81px scrolled rgba(0, 0, 0, 0.11) 82px scrolled rgba(0, 0, 0, 0.12) ...

You can see an example for that here: http://demo.thememodern.com/architect/homepage-5/

Anybody knows how that works? Thanks for ideas!

Write with JS the background-color as inline-style, where the alpha value depend on the current scroll position. — Sven Eberth
– Sven Eberth, Commented May 31, 2021 at 18:19

Elvi Xhaferri · Accepted Answer · 2021-05-31 19:57:25Z

2

<style>
body {
  height: 3000px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
</style>

answered May 31, 2021 at 19:57

Elvi Xhaferri

1954 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omar Zaoujal · Accepted Answer · 2021-05-31 20:23:11Z

0

I think here is the answer that you are looking for,

JS

// when the user start scrolling
window.addEventListener('scroll',()=>{

// now call the background
const myBackground = document.getElementById('myBG');

// now the condition when the user start scrolling then change the color
if(window.pageYOffset > 400){
   myBackground.classList.add("is-sticky");
   myBackground.classList.remove("is-sticky2");
}

else if(window.pageYOffset > 200){
    myBackground.classList.remove("is-sticky");
    myBackground.classList.add("is-sticky2");
} 

// when the header be in the top of the page that mean window.pageYOffset = 0 so
else{
    myBackground.classList.remove("is-sticky");
    myBackground.classList.remove("is-sticky2");
}
})

CSS you need to add those classes :

.is-sticky{ background-color: blue;}
.is-sticky2{ background-color: red; }

and ofc the header should have the Id that we used in js code

answered May 31, 2021 at 20:23

Omar Zaoujal

4758 silver badges17 bronze badges

1 Comment

rabo Over a year ago

Thanks, looks like it is what I was searching for.

Collectives™ on Stack Overflow

CSS/ jQuery change background on scroll

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related