Streaming live at 10am (PST)

Problems with z-axis positioning and sticky images

Hello forum,

I am an amateur designer in Tokyo working on a home page for a non-profit organization I run here. The page is just about at the place that I want it to be, but I am having one persistent issue with z-axis positions getting messed up during scrolling.

The desired behavior is for the text to fade in and then scroll above the two sticky images midway through the page. This usually works fine the first time, but after repeated up-and-down scrolling on the page, the WhiteBackground div usually falls behind the sticky images, leaving the text scrolling backgroundless atop the images. I am stumped as to why, because the z-axis values for WhiteBackground are higher than those for the sticky images, and it seems to work the first time.

One solution that occurred to me is to change my fade-in interactions so that they apply to the headings classes instead of the fade-in text box, which would eliminate the need for the WhiteBackground div (I added this because I didn’t want a white background fading in and moving together with the text). However, in the interest of learning why this is occurring, I would be grateful if anyone here could take a look and advise as to a solution. The classes are a bit of a mess, but am still working on cleaning it up :stuck_out_tongue_winking_eye: Thanks in advance from Tokyo!


Here is my site Read-Only: Webflow - Sento & Neighborhood