sceneHeight script issues

1

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)

2

Hype project: bottomPin_JHSv1.hype.zip (28.5 KB)

Note: The "stripped down to debug some elements" phrase in your post above does give me pause as my approach is different from yours which may impact the dynamics of the non-stripped down version.

In a nutshell the "Shrink to Fit" scale behavior is used instead of "Expand to Fill" for the "background group-fixed" group. "Shrink to Fit" is also used for the "scrolling circles" group which in your set-up had no scale behavior.

2 Likes
3

Thanks @JimScott! that was it and so simple, too

1 Like