Can I change the background color of a fixed header when scrolling down?

Hello everyone : ))
Is there a way to change the background color of a fixed header, so the original background is white, but when scrolling down , the background turns into gray.
Can I do it with only html and css files, or do I have to create a J.S file and connect it to html?

I might be wrong but are you referring to a parallax effect?

1 Like

CSS can’t listen for events (like scrolling) or detect the current scroll position, so you’d have to do that with a little JavaScript.

However, some “hacks” are possible. Here’s an article describing how to add a box shadow to the header element when the page is scrolled using pure CSS (including a link to a codepen):
https://stijndewitt.com/2018/06/12/pure-css-drop-shadow-on-scroll/

You’d have to check if you can modify that for your needs.

1 Like

Thank you for sharing this video with me !! I’ve learned something new. What I am trying to do is a bit different, it’s like I want the header itself to have some kind of shadow when scrolling down

I’ve read the essay, and it describes exactly what I am trying to do, in the essay it says to do this, the position (sticky) is needed , but I am concerned about one thing, will that affect the header being fixed?

Thank you so much for sharing it with me ,I will try it out :rose:

You need to add some scripting for it. You need to add a style to header based on scroll position which will turn it in gray.

1 Like

If your header is at the top of your page anyway, it doesn’t really matter. position:sticky actually toggles between position:relative (if the element hasn’t scrolled into view yet) and position:fixed (if the page has scrolled to a point where its parent container is just about to scroll out of view). Which is always the case for a header at the top of the page.

You’ll only have to make sure that the element you’re setting to sticky is a direct descendant of the body. If you nest it somewhere and that element scrolls out of view, so will your header.

1 Like

Thank you so much for explaining it , it actually worked !! the header is still on the top when scrolling down when I edited the position to add the style

I thought the same, but I was confused whether css can’t understand “scroll” operation or not . After reading the essay @jsdisco shared, I understood that css does not understand logic, but since I won’t use J.S to my website ,I used position sticky to apply the style needed
Thank you for replying

It’s better to use JS for this effect. And CSS won’t make that transition, but you can add styles with it. And be careful about using positions, especially- absolute, because adaptability will be very difficult to do. I would like to learn JS further and start learning jquery. But so far I’m very limited in time and opportunities since I need to finish my thesis. And although paper writing service helps me with this, I still don’t have enough time. I want to finish everything as soon as possible and start doing what is I really like.