Welcome to TalkGraphics.com
Results 1 to 9 of 9
  1. #1
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default 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?

    Click image for larger version. 

Name:	Scroll_Stick Defined Height.jpg 
Views:	141 
Size:	42.1 KB 
ID:	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
    Last edited by Initiostar; 12 February 2020 at 10:23 PM.

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Object Scroll Upwards to a Defined Height and Stick

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

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Info Re: Object Scroll Upwards to a Defined Height and Stick

    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
    Last edited by Acorn; 13 February 2020 at 04:07 PM.
    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
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default Re: Object Scroll Upwards to a Defined Height and Stick

    Excellent Acorn. Your advice is much appreciated. Thanks Gary

    My library of CSS workarounds continues to grow with your help

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Object Scroll Upwards to a Defined Height and Stick

    Quote Originally Posted by Initiostar View Post
    Excellent Acorn. Your advice is much appreciated. Thanks Gary
    My library of CSS workarounds continues to grow with your help
    Thank you Gary. What were the "odd side effects"?

    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

  6. #6
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default Re: Object Scroll Upwards to a Defined Height and Stick

    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'

    Click image for larger version. 

Name:	initiostar index page header.jpg 
Views:	128 
Size:	57.8 KB 
ID:	126350 Click image for larger version. 

Name:	initiostar index page stick-at-top.jpg 
Views:	113 
Size:	71.7 KB 
ID:	126352

    Click image for larger version. 

Name:	PreScroll Position.jpg 
Views:	110 
Size:	55.7 KB 
ID:	126346 Click image for larger version. 

Name:	MidScroll Position.jpg 
Views:	144 
Size:	45.0 KB 
ID:	126347 Click image for larger version. 

Name:	Post Scroll Position.jpg 
Views:	106 
Size:	31.8 KB 
ID:	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
    Attached Files Attached Files

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Object Scroll Upwards to a Defined Height and Stick

    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
    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

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Info Re: Object Scroll Upwards to a Defined Height and Stick

    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.

    CSS Top of Page (reworked).xar.

    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

  9. #9
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    961

    Default Re: Object Scroll Upwards to a Defined Height and Stick

    Thanks Acorn much appreciated.

 

 

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
  •