Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1
    Join Date
    Nov 2016
    Posts
    17

    Default Top Banner only visible when scrolling down

    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.

  2. #2
    Join Date
    Feb 2007
    Location
    UK
    Posts
    21,400

    Default Re: Top Banner only visible when scrolling down

    can you post your url ?
    -------------------------------
    Nothing lasts forever...

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,972

    Lightbulb Re: Top Banner only visible when scrolling down

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,821

    Default Re: Top Banner only visible when scrolling down

    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

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,972

    Default Re: Top Banner only visible when scrolling down

    Quote Originally Posted by JD001 View Post
    Please assist.
    Please acknowledge.
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,972

    Lightbulb Re: Top Banner only visible when scrolling down

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: Top Banner only visible when scrolling down

    Quote Originally Posted by Chris M View Post
    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?

  8. #8
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    955

    Default Re: Top Banner only visible when scrolling down

    Quote Originally Posted by ich View Post
    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.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,972

    Default Re: Top Banner only visible when scrolling down

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #10
    Join Date
    Nov 2021
    Location
    Germany / Hessen
    Posts
    23

    Default Re: Top Banner only visible when scrolling down

    Ah,
    THX

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •