Sticky sticky...

[Alterastro]

Hi all

I've searched for this but can't find an answer, so...

I have a nav bar at the top of my page that is a Sticky. Further down the page I have something that I would like to scroll until it hits the Nav bar and then stops. Is this possible? If I set it to Stick to top it scrolls and diasppears under the nav bar and then stops...

Thanks

Nick

[Egg Bramhill]

Hi Nick, not without cheating. Make your second object a png or gif with a transparent bit at the top. See attachment.

[Alterastro]

Hi Nick, not without cheating. Make your second object a png or gif with a transparent bit at the top. See attachment.

Thanks Egg, but the second object was going to be another nav bar... oh well, back to the proverbial!

[Acorn]

Thanks Egg, but the second object was going to be another nav bar... oh well, back to the proverbial!

Try soft-grouping a transparent panel behind and with your moving NavBar, big enough to stop it riding up too high.

Acorn

[Alterastro]

Cool. I'll try that. Thank you

[siran]

Soft-grouping didn't work for me, can you give some more details?
Xara complained about different anchoring or something.

As a workaround I tried padding the nav bar using CSS, but that only works if there is only one stick to top nav bar, and it will move the nav bar down also when not sticked.
In the example you can see the nav bar is simply moved down by 60 pixels and stops 60 pixels from the top when scrolling.
Maybe someone is able to improve that workaround?
The CSS is at the website head code.
It is only the line

<style>div.xr_stt div[id^=xr_nb]{padding-top:60px}</style>

[siran]

I was not able to improve the workaround with pure CSS but here is a javascript version that doesn't change the navbar position.
The code is at the website body this time and that is required. The code has to be executed after everything is in place but before Xara's init function (xr_aeh) is executed.
The code includes some comments (everything placed after two slashes is a comment), please ask if you need further explanation.
You can have only one offset if you place the code at the website, but you may move the code to the page body if you need individual offsets per page.
You may only have one navbar with the stick to top option with the current code. If you need more with differing offsets the code has to be changed to access specific objects. But there is a problem identifying the navbar because Xara seems not to add a class name when using the name htmlclass=... at a navbar and what makes it even more different, the IDs of the navbar seem to possibly change when you add or remove additional ones.
This is the code.

<script>(function(){
 var shift=60;// put the desired value that stick to top navbars should stop below the top here
 var s=document.getElementsByClassName("xr_stt");
 for (var i=0;i<s.length;i++){// loop over all stick to top elements
  if(s[i].firstElementChild&&s[i].firstElementChild.id.substr(0,5)=="xr_nb"){// check if it is a navbar
   s[i].style.top=(parseInt(s[i].style.top)-shift)+"px";// move the wrapping div up
   s[i].style.visibility="hidden";// don't display the div itself (so that it doesn't prevent objects below to be selected or clicked)
   s[i].firstElementChild.style.visibility="visible";// display the navbar
   s[i].firstElementChild.style.paddingTop=shift+"px";// move the navbar content down inside of the navbar
  }
 }
})();</script>

[Alterastro]

That's brilliant - thanks so much Siran