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?
Hello everyone : ))
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):
You’d have to check if you can modify that for your needs.
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
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.
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.
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.