Hi, I’m trying to get an element to pin to the bottom of the browser window and am looking for some help.
For context, this is a scrolling page with fixed elements and animation controlled by the scroller script (from @DBear) In that script, the fixed background doesn’t know how tall the browser window is. So I’ve added a “sceneHeight” script and some CSS from @h_classen. (Fullscreenstart plus following content)
This should allow me to set a container to fit the screen height and from that, I can pin a child element to the bottom center of the screen using some simple css.
What I’ve ended up with looks great when the browser window is narrow (at or under scene width of 600px wide) but as I expand the browser beyond that width, the fixed elements creep up the screen.
Here’s a hype doc that’s stripped down to some debug elements. The red circle should be pinned to the bottom of screen while blue circles scroll up/down with mouse input.
bottomPin.hype.zip (46.8 KB)