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

HTML-CSS
1

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?

2

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

1 Like
3

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
4

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

5

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:

6

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
7

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
8

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

9

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