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

[ich]

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

Chris M.
I have a question to this solution.
Your example demonstrates the standard way how to solve the issue.
Along with this I am experiencing another issue, which I was not able to find a solution yet.
The Text needs to be grouped with a background rectangle for example. This ensures exact postion when reaching the top of the page.
But when grouping a text, it becomes a picture and as result it will be blurred, depending on screen size used while watching. Especially when using fit-to-page-width in the "export" section. Only once the text stays a text it will sustain sharp, no matter which screen size. A Soft-Group could be the solution, but it does not allow the proper set-up for the correct positioning of the text, once touching the top of the screen.
Is there any workaround I missed yet and could solve this issue?

[Initiostar]

Chris M.
I have a question to this solution.
Your example demonstrates the standard way how to solve the issue.
Along with this I am experiencing another issue, which I was not able to find a solution yet.
The Text needs to be grouped with a background rectangle for example. This ensures exact position when reaching the top of the page.
But when grouping a text, it becomes a picture and as result it will be blurred, depending on screen size used while watching. Especially when using fit-to-page-width in the "export" section. Only once the text stays a text it will sustain sharp, no matter which screen size. A Soft-Group could be the solution, but it does not allow the proper set-up for the correct positioning of the text, once touching the top of the screen.
Is there any workaround I missed yet and could solve this issue?

One way when using a stick-at-top soft-group to ensure that text aligns correctly with the top of page banner is to vertically offset the text; explained here: > https://initiostar.co.uk/demo/satmenu/. If you were grouping text with a shape, then you could give the text a name "htmltext". I had thought the issue of a shape/text group retaining text-as-text had been resolved in the Xara Plus versions.

[Acorn]

The best hack I can think of is to add a line above your text in a text area.
You include a single Space and adjust its Size to offset the proper text down.

Xara - Stick text almost at Top.xar

@Gary, correct. The Plus products do not need 'htmltext'.

Acorn

[ich]

Ah,
THX