I want to show, hide layers onScroll. So far here’s what I managed to do :
Two Div on top of each other, an overlay layer (absolute position) covering the whole image underneath.
The overlay layer has its opacity changing to 0% when scrolling into view.
Then I set the overlay layer to invisible (since I need to be able to click on the layer underneath in a second time allowing me to display a lightbox onClick).
I’d like to have the overlay be visible again when it scrolls out of view (so the animation will run again).
It only works if I change the transparency only. If I decide to hide (make invisible) the overlay layer, I can’t show it back.
Of course, it could be solved by moving the overlay layer underneath and play with the photography opacity, thus making the picture clickable but the overlay remains on top.
Any suggestions on how to make the overlay layer show after it’s been hidden?
Here is my public share link: