Stick at Top questions

[bwood]

The website - nipawinmuseum.org

I've got a nav bar, rectangle, text, and a very small graphic all sticking at top.

As you move slowly down the text, buttons, and graphic are skewed up just a touch. Those elements move to the top, but not with the rectangle. I can't seem to solve it. All elements are repeating. I've included a screen shot of the problem. If I lock those elements it might make a difference. Thanks all for looking.

-Bill

[Initiostar]

The website - nipawinmuseum.org

I've got a nav bar, rectangle, text, and a very small graphic all sticking at top.

As you move slowly down the text, buttons, and graphic are skewed up just a touch. Those elements move to the top, but not with the rectangle. I can't seem to solve it. All elements are repeating. I've included a screen shot of the problem. If I lock those elements it might make a difference. Thanks all for looking.

-Bill

Bill, several ways of resolving this and one of them is explained here: https://initiostar.co.uk/demo/satmenu

Another commonly used (historically at least) method is to group the text with a shape (99% transparent) to create padding between the top of the page and the button text. Of course, the standard Navbar approach of soft-grouping two groups (MouseOff and MouseOver layers) does not have the problem.

[Egg Bramhill]

Bill, as well as Garys suggestion as your sticky content is almost at the top anyway, why not make them Sticky instead of Stick to Top? I find this stops the juddering text which SaT often creates.

[Acorn]

Bill, like most things in Xara, there are many solutions.

If you precede your text with a Space on a line above then SaT will stop at that Space.
So you then adjust the font size of the Space to that of the difference between the original text hitting the top of page and where you actually want it to stop.

As it is a one-liner (now two), you could adjust the Line spacing but easiest is probably using the Baseline shift on the Space.

Acorn

[bwood]

Thank you Egg, Acorn, Initiostar. I understand the baseline shift for the text, but the buttons are also skewed. Therefore maybe sticky will work for them as Egg mentioned. I also understand (sort of) the transparent rectangle approach Initiostar. I’m just have a struggle getting my head around it.
I don’t think the baseline shift is going to work for the buttons.

[Initiostar]

Thank you Egg, Acorn, Initiostar. I understand the baseline shift for the text, but the buttons are also skewed. Therefore maybe sticky will work for them as Egg mentioned. I also understand (sort of) the transparent rectangle approach Initiostar. I’m just have a struggle getting my head around it.
I don’t think the baseline shift is going to work for the buttons.

No sure why your buttons would be skewed, but here is a baseline shift example from the demo: Menu_Scrolling_Stick_at_Top.xar.

As Egg said though, unless the scrolling menu is fundamental to the design, just have the menu sticky and placed at the top.

[Acorn]

Bill, use SaT as normal for the button shape.

For the Menu Texts, I would add in the ClassNames of htmlclass="btnTxt xr_stt".
In Website Head, add CSS:
<style> .btnTxt > span { padding-top: 32px; } </style>

Change the size for padding-top as required.
The xr_stt ClassName adds in SaT effect directly; it gets lost through the Xara Stick dialog.
It might be where I put the CSS.

Acorn

[bwood]

Bill, as well as Garys suggestion as your sticky content is almost at the top anyway, why not make them Sticky instead of Stick to Top? I find this stops the juddering text which SaT often creates.

Thanks Egg. I went with this option and it worked splendidly.

W

[Egg Bramhill]

Cheers Bill, often the KISS way is the easiest