Sticky List Item

Framework7 has an extremely simple way to do sticky headers in list views, by creating a list item and giving it the list-group-title CSS class.

I am wondering how to get this “sticky header” behavior on the “parent” list item, so that when I scroll down, the parent sticks at the top, like so:

Is there a way I can leverage existing Framework7 CSS classes or JavaScript code to enable this behavior, without hacking at the code to use my own home-baked position: fixed style modifications?

(I already tried adding the list-group-title CSS class to the “parent” list item, and it modifies the parent and children list items, and not just the parent.)

It is native CSS feature: “position: sticky”

1 Like