Question re Chroma - stickiness

Big White Duck
1

I am wondering if the menu can start in one position, say under first section of content, then sticky to top of page once scrolling has got it there. i can’t find a way to do that.

2

I think there are two examples of that on the Chroma example page, unless I’m misunderstanding your question:

https://demo.bigwhiteduck.com/chroma/examples/

First is:
Basic Examples > Simple Sticky

Second is:
Chroma Pro > Sticky Fix

Then there is also:
Basic Examples > Sticky with Offset

3

Thanks I will have a look at that.

4

Ok I have gone through the examples and I cannot find the same functionality in Chroma Pro as in Chroma. I can see quite clearly the functionality of having a menu below content which then stick when scrolling makes to reach the top of the page, but I want to use Chroma Pro because of the styles and I cannot see the same section Trigger styles when Sticky fixes. Or it could be that my initial settings in Chroma Pro do not reflect the fact that the menu is fixed…until it is not. Driving me bats. Sorry will have to give it a rest.

5

Maybe I’m not entirely understanding what you want to do, but I’ve just opened the demo project and there on the page called Sticky Fix With Offset there is what you want to do, in the 2nd SP stack from the top. Just don’t add an offset.

And in Chroma Pro the setting for stickyness are there, identical to Chroma.

Maybe I’m missing something?

6

To make it sticky simply set the Position to Sticky this control is identical in both Chroma and Chroma Pro.

Sticky means that the position will be “static” and scroll with the page until it reaches the top of the screen at which point it will “stick” and become fixed position.

This is the part that is different between stacks but is not how you tell the stack to be sticky. It controls what styles you use when it does finally stick.

Now, Chroma Pro does not have that setting as it does not need it. Why? Because Chroma Pro uses the markers and the fixed styles child stacks that you want to use. So to get a style to be applied when the menu sticks, you would just put a marker directly above the Chroma Pro stack. This would get to the top of the page (and become the active style) at the same time as the Chroma Pro stack does. At this point it will stick and the style will be applied. Hey presto.

I made a video about this subjectL

1 Like
7

Thanks all - I have a clearer head today. Pro tip - don’t try and do website work with a screamingly painful eye and codeine based pain meds…

3 Likes
8

Thanks for this question Alison and Tav for the answers. Watching the video has got it all to fall more into place for me now!!