Top Banner only visible when scrolling down

[JD001]

I have a full page image widget as a top "page"and would like my Top banner and Navigation bar to only become visible when scrolling down. I have set it behind the image and set as Sticky at Top but then all other items scroll over the banner.

Please assist.

[handrawn]

can you post your url ?

[Acorn]

The construction:

1. Hero image on top, Repeating and Sticky.
2. NavBar underneath, Repeating and Sticky. Set to Fade In with a Delay of half a second.
3. A shape the height of the Hero image with a Name of hero at top of page. It can be a copy of the hero image with no Stick or just a thin vertical rectangle.

The trick:
(3) is rendered underneath (1 & 2) regardless of its position as Sticky items always sit on top.
If (3) is the same as (1), there is no flash waiting for the page code to kick in.
Likewise (2) has a delay to avoid any flash.

When you scroll up (3) disappears off the page and as it is the Hero image trigger, (1) also disappears.
When you scroll down and (3) touches the page again, (1) re-appears and (1) half a second later (2) does too but is underneath (1).

Acorn

[Chris M]

If there's nothing 'Stretch To Full Width' in your banner/navbar, then ensure the sticky objects are at the front of your project - select the objects and CTRL+F.

If you have a full width rectangle behind your banner and navbar - create another rectangle that is the same height and colour as your full width bar, the same width as your page, 'Stick At Top', but not set to Stretch To Full Width. Position behind banner and navbar. Select rectangles, banner and navbar and bring to front of project CTRL+F.

If you want your image to remain static, set it as Pasteboard Background (Fill Browser Window)

Example: JD001.xar

[Acorn]

Please assist.

Please acknowledge.

[Acorn]

I am annoyed.
Many TGers spend their time helping others and the only recompense expected is a 'Thank you!'
Far better is a dialogue, where the OP engages in a discussion of the problem and adds further clarification.
Thereby, other can gain insights or even solutions to their issues.

This Thread seems to be a fly-by posting.
As expressed in very few words, the approach seems to be self-defeating when there is no browser scroll possible: page is short, zoom is small.

It is fairly awkward to achieve using built-in Xara functions as there are issues that impact the solution as Xara forces the z-index of Sticky and Stick at Top items as well as unwanted delays.

For what it is worth (and possible discussion) Page 1 has a JavaScript approach that is probably not what is needed, but it is a start: Heroic.xar
Page 2 is pure Xara, making an assuming around the OP's original ask.

Suggestions?

Acorn