Xara has a web animation effect when an element scrolls into view or is made visible in the viewport (browser window).

There is no such opposite feature: make something happen when an element move out of view.

JS-CSS - Intersection Observer - Display element on Scroll.xar is my attempt to do just this.
It is experimental in that I have hard-coded the Name of a stretch object as 'bar' and menu buttons as 'htmlclass="btn"', the latter is for any number of objects so named.
The code is all Placeholder code of an icon that I Named 'offpage'. The firing of the code occurs when this icon is no longer visible in the web page.
All you need do is decide how high up the icon is.

The bar and its buttons all have to be made Sticky and must have the Names I defined above.

For interest, read https://blog.webdevsimplified.com/20...tion-observer/.

Acorn