Object Scroll Upwards to a Defined Height and Stick

How best can I change 'stick on top' to scroll and stick at a height from the top of the page?

Attachment 126332

My workaround is to create a 100% transparent object, place it above the visible object, group the two and use stick on top. Has some odd side effects though; not sure about this in Xara, but maybe a 'style' with position: sticky; top 20px;?

Any suggestions how to do this correctly and smoothly welcome.

Thanks

That's how I would do it. I'll move this thread to Dear Xara, cause it sounds like a feature request. :)

Xara makes a song and dance around Stick at Top so this is one way I have found.

Stick at Top adds a ClassName of xr_stt to the object.

The following code goes into the Page code (body):

Code:

---

<style>
.xr_stt {
  border-top-style: solid;
  border-width: 25px;
  border-color: rgba(0,0,0,0);
  background-clip: padding-box;
}
</style>

---

This will be applied to all Stick at Top Objects.

If you are after selected objects then name them filename="stickat25" and replace .xr_stt with .stickat25.

It will work for any object that renders as an image or is text.
It works for rotated or round cornered boxes without any Line width. It then reverts to Xara's Stick at Top. I get round this by adding a very small Bevel or Contour (0.1px).
It fails if the box has a linear simple fill as it maps this into the top border; other fills work properly. I get round this by setting the Fill as Repeating but make sure only one repeat is there.

Acorn

Excellent Acorn. Your advice is much appreciated. Thanks Gary

My library of CSS workarounds continues to grow with your help :D

Quote:

---

Originally Posted by Initiostar

Excellent Acorn. Your advice is much appreciated. Thanks Gary
My library of CSS workarounds continues to grow with your help :D

---

Thank you Gary. What were the "odd side effects"?

Acorn

Thank you Acorn - the 'odd side effects' were 'operator errors'. I retraced (and corrected) my original processes in a test document (attached) and all works as expected; the flower being a bitmap image grouped with a transparent rectangle on top.

Where in the earlier example I used a linear fill in the display screen button, I converted the screen bitmap and its linear fill into another bitmap, added the transparent rectangle and created one bitmap for all, this allowed me to created a button that works correctly with MouseOver and a Xara NavBar'

Attachment 126350 Attachment 126352

Attachment 126346 Attachment 126347 Attachment 126348

Interestingly you can create a pseudo parallax effect where objects stop at different heights from the page top.

I tried your code on the CSS text and surrounding rectangle, but somewhere I have failed to execute it correctly. The CCS text and surrounding rectangle with a 25px border should (I think) stop at the red line?

Another thought (for individual objects) is can I set a style that uses position, rather than a border? Assume each sticky object would have its own filename ="xxxx" and the corresponding style could be set (say) top 100px? I did try it, but without success.

I noticed IE Preview causes a judder at page top, but all is well in any other browser.

Thanks

My fault, I used filename="stickat25" instead of htmlclass="stickat25" in the Post.
Sadly, it now doesn't want to play.

My file should have been alright as I wasn't using the Name anyhow so for the moment change the code back to .xr_stt.
I will have another go.

Sorry.

Acorn

All sorted now.
I unpacked your file a bit and rearranged some objects for testing.

What I have also left is an 0.5 opacity so you can see the objects wearing a grey hat that hits the buffers.

:pointAttachment 126353.

Acorn

Thanks Acorn much appreciated.