piotrwicijowski
commented
1 year ago Unfortunately I'm afraid this can't be achieved by pure css (at least not in 2023, and not in a clear way, maybe there are some dirty hacks that would work, but make everything very brittle), so you'll need to resort to using js. In general the most common approach for such cases is to check the scroll position, and if it is e.g. below a specific threshold, you don't show semi-transparent background, and if it is, then you show it. As you have mentioned, there are ways to do this with useEffect, but then you would need to write all of the supporting logic yourself (like in the sample shown here: https://dev.to/n8tb1t/tracking-scroll-position-with-react-hooks-3bbj ). Or, instead of re-implementing it yourself, you can just use a ready made npm package that wraps all of the scroll position handling for you, like this one here https://www.npmjs.com/package/@n8tb1t/use-scroll-position . From there you would just check if the position is higher/lower than a pre-defined value (you can hard-code that) and based on that set/unset a class that dictates if the background is shown.
fromITzerotoIThero
W.,
I'm finishing up styles of fixed Menu, but there is one issue, I'd love to have your general advice on. How to make the background of the Menu totally see-through when on HeroSection and only partially transparent when outside of it? Do I need to go for useEffect or am I missing some simple solution?