Scroll and Stick

[dportener]

I understand how to make an object sticky. However, I noticed that the Xara site: http://www.xara.com/us/web-designer/features/ displays an full-width image and nav bar that starts out below the top of screen and "sticks" to top after you start scrolling down.

Anyone know how to replicate this?

[Acorn]

Probably with a cheat.
Make a sticky object on a Reveal event appear in the same place as the bar that's just been scrolled up into position.
If it is not a Xara-driven event then there will be some other CSS set off by a JavaScript trigger to do the same.

Acorn

[gwpriester]

If Xara gets around to a Conceal feature, which I hope they do soon, then a whole lot more things will be possible.

[dportener]

Thanks Acorn! Good idea for a "cheat".

However, the Reveal event is triggered when the "object comes into view" OR until another object comes into view.

Since I'm trying to make the object stick (or appear to stick) after moving the headline moves off of the screen, I can't see an opportunity to trigger the Reveal with an object coming into view.

Perhaps this is another opportunity for you to build some of your legendary CSS magic we can insert into a placeholder

In the meantime, I'll wait with Gary for a new "Conceal" feature.

Thanks!

[Acorn]

Thanks Acorn!
Perhaps this is another opportunity for you to build some of your legendary CSS magic we can insert into a placeholder

It seems to be quite complicated at first.
I have found this: http://jsfiddle.net/livibetter/HV9HM/.

basically, it boils down to being able to detect a scroll event; you would use jQuery or Javascript for this.
The jQuery toggles a class of an object to become fixed when a position is crossed and toggled back when it is smaller.

In a Xara design it should only need to have an object with an ID that is then toggled by such an event and the necessary CSS is applied against the toggled class.

Acorn

[dportener]

Thanks Acorn!

I'll try to make this work - and will post if successful.

[Egg Bramhill]

.... displays an full-width image and nav bar that starts out below the top of screen and "sticks" to top after you start scrolling down.

Anyone know how to replicate this?

My question is why would you want to do this? It's ugly in my opinion and just confuses the page display. Have a sticky navbar by all means but don't have it jump up and down the screen dependant on the scrolling, just have it stick to the top of the page. Appears to me it's one of these "Just because you can do it, do you really have to do it?" type of effects.