Sticky content without using ion-list

Ionic Framework
1

In my Ionic app, I have an element I want to make sticky. Once the user scrolls the element into view, I want it to stay at the top of the screen no matter how far down the user scrolls.

I can’t get position: sticky to work.

I saw a thread on keeping content at the top, but the solution in that thread relies on ion-list. Is there a way to use sticky without using ion-list? Currently, my page consists of several divs and ion-toggle; the content I am trying to make sticky is a div tag that contains a single p tag and one line of text.

I’ve got a pretty complicated page structure and I hope to avoid rebuilding it to use ion-list just to make one thing sticky.

2

Ok, I found a way to make it work without ion-list. It was as simple as <div class='sticky'> and this CSS:

.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  // We must set the background so that text that rolls underneath isn't shown.
  background-color: var(--ion-background-color);
  border-bottom: 0.1rem dotted var(--ion-color-tertiary);
}