New pattern pat-sticky

[pilz]

Cornelis found this:

https://github.com/wilddeer/stickyfill which behaves great in Chrome and IE and Edge. Would love to have this one as pat-sticky but there’s only one thing it doesn’t do that would be nice and that’s a class ‘stuck’ or similar when it’s touching the edge. Sometimes you want a bumper, sometimes a sticky, but sticky — which is CSS native — is not supported yet in Blink. Safari and FF do it perfectly, so this polyfill comes at hand

[pilz]

See #475 for a Proof of Concept to be tested by @cornae

[cornae]

Works like a charm! One extra thing is needed though and that's the selector property. By default the selector is the element that has pat-sticky on it. Say the default is ::self. What I need is also to assign other selectors (typically a class) within the pat-sticky container. Useful for output of a rich text editor in a CMS drive website in which you want to make headers sticky. The selector selector: h3 could be used to make every h3 within the sticky container sticky. The container itself is then no longer sticky.

Must haves

• [ ] Selector property

It should be checked if pat-sticky nicely re-initialises after layout modifiers have been active on the page (Such as pat-toggle, pat-switch and others) and after an injection which might have sticky elements in it.

• [ ] Re-initialisation of pat-sticky after injection
• [ ] Re-initialisation of pat-sticky after layout modifiers

Nice to have for now

Another wish — albeit it less critical — is to have a dynamic class on the sticky element once it's sticking. Probably even class sticking.

• [ ] Sticking class

[pilz]

I made the change. However it behaves unexpected.

I have added these styles to the top of index.html .stick-me { position: -webkit-sticky; position: sticky; top: 0;
} .stick-me:before, .stick-me:after { content: ""; display: table; }

Now the stick-me sticks properly in chrome but in safari, the text below it doesn't scroll up and sticks as well. Style issue?

I am also now listening to update events. I added an inject trigger autoload-visible that includes another sticky and that one is sticking as well once injected.

And last not least I am adding the class sticking once the Stickyfill is set.

Take a look, I hope it works as intended!

[cornae]

Fab. I pushed a CSS change that solves the problem in Safari which happened because Safari is one of the few browsers that has the native behaviour.

Selector works great.

Injection works great. (Pushed small target and styling correction)

The only thing that doesn't seem to work is the sticking class. In Chrome it's always there. The intention is that the class sticking is there when the element is sticking. Now it's put on the sticky elements on load. In Safari the class then again never appears.

I would already love to use pat-sticky even without the sticking class as intended and do that in a later version.

[pilz]

@cornae I removed that class again in https://github.com/Patternslib/Patterns/commit/5174ac9c597f90ab227b866fe990ee9a2df8a6a5. Does that make this ticket solved?

[pilz]

Missing: a class stuck when the element is stuck