Non-sticky in front

[gcellison]

Hello, all, and happy Sunday.

I’ve just spent a fair amount of time looking through old threads to see if this has already been answered (because I feel like it must have), but I haven’t had any luck finding it.

I’m trying to get an element (actually, a logo that is an image over a shape) to appear in front of a sticky menu banner at the top of the page. The logo element will scroll up, so it is NOT sticky. As we all know, sticky objects always appear in front of everything else by default in Xara, so I need to override that default.

I have tried putting the element on a higher layer, but the sticky banner still covers it up.

I have tried assigning it an html class with << coding z-index: 99 !important; >>, but still no luck. Afterwards, I found Acorn’s very similar solution:

<style>
.xr_strb {
z-index: 99;
}
</style>

The response pertains specifically to stretchy objects. It does not carry over to non-stretchy / non-sticky objects (at least in my testing).

Has anyone come up with a solution to this problem?

Thanks in advance for any help.

[Acorn]

I doubt if this is what you are after but I have a shape (not a NavBar), which is 690px width (the Red one), centred and with a Name of htmlclass="fixed".

My head code is:

<style>.fixed {
  position: fixed;
  margin-left: calc(50vw - 690px);
}
</style>

It is now "sticky" with other objects scrolling over it.

I tried adding "fixed" to a Navbar but it still moves and adding Xara's Sticky (the Green shape) doesn't work.

Preview with a short height window to see things in action:

CSS - Fixed Under-Shape.xar

Acorn

[gcellison]

Thanks, @Acorn. Your solution is clever. Sort of like Muhammed going to the mountain.

I hadn’t thought of making the banner stick with CSS rather than through Sticky / Stretchy. I think it will work.

Thanks again.

[Initiostar]

Greg,

Here is an idea I have used before where the headline message and logo sit above a stick-at-top bar. The stick-at-top bar has a top-of-page button which brings the headline message and logo back into view. I have also used a parallax scroll for the stick-at-top bar. The trick to make this work are the two stick-at-top bars, one NOT stretched at the front, the other stretched and put to the back. Otherwise elements on the page scroll over the top of the stick-at-top!



Attached XAR.

Gary

[gcellison]

Greg,

Here is an idea I have used before where the headline message and logo sit above a stick-at-top bar. The stick-at-top bar has a top-of-page button which brings the headline message and logo back into view. I have also used a parallax scroll for the stick-at-top bar. The trick to make this work are the two stick-at-top bars, one NOT stretched at the front, the other stretched and put to the back. Otherwise elements on the page scroll over the top of the stick-at-top!

Gary

Thanks Gary!

I worked with stick-at-top a while back. I remember that there were some issues with strange behavior... if I recall, that certain elements from below would scroll over the stick-at-top banner, and that text elements would "gather" at the top margin, rather than staying centered in the banner. Yours seems to work well, but have you noticed either of these problems in more elaborate pages? Perhaps Xara has fixed the problems from when they first introduced the feature.

Greg

[Initiostar]

Greg,

I’m trying to get an element (actually, a logo that is an image over a shape) to appear in front of a sticky menu banner at the top of the page. The logo element will scroll up, so it is NOT sticky. As we all know, sticky objects always appear in front of everything else by default in Xara, so I need to override that default.

The way to do this is to set your banner to Stick-at-Top not Sticky and place it at the top of page. As this is its final destination, it does not scroll anywhere. Now you can place sticky and non-sticky objects on the banner, those that are sticky stay in place, those that are non-sticky scroll out of view (which is true for your logo).

(1) certain elements from below would scroll over the stick-at-top banner, and (2) that text elements would "gather" at the top margin, rather than staying centered in the banner

(1) The dual banner approach solves the first issue (as explained).

(2) This is not a bug, it is the correct behavior for Xara's stick-at-top (just not that helpful). The easiest (no code) approach sees a transparent rectangle placed around the objects in a group to keep them correctly positioned. The distance from the top of the transparent rectangle to the visible objects determines the height at which the visible objects will appear from the top of page.

I have attached XAR v2 which shows all this working correctly. Yet another interesting work-around!

Gary

[Chris M]

You don't even need the transparent rectangle.

Make your text box taller than text, say three times taller as an example. Using the Vertical Text Alignment set the text to Bottom. Adjust text box height to suit.

[siran]

A different approach would be to design a stickie and to un-stick it with javascript.
This example is just an experiment that will not work with scale to fit or stretch to width. But it seems to work at least for a supersite with transitions and variants.

[gcellison]

Thanks guys. Seeing your different methods, I will test a bit and see which one to use.

Cheers!