Changing SCROLLER to stay in stack order (*solved*)

I was testing out the cool and free Scroller progress bar from Shaking The Habitual.

Out of some quirk of other stacks on that page, Scroller did not pin to the top or bottom as designed, but stayed in the stack order. That was great :slight_smile: as a dividing line that reacts as you move through your content. But now I can’t reproduce that effect on new pages, or know if the effect will stay around page updates.

Anyone have an idea how to keep the Scroller container in the stack order, or even contained in the parent stack?

Stuart @habitualshaker shows how to code the progress bar, which I may try and figure out with fresh coffee.

The paid version adds more functionality but still, sensibly, seems to want to be at the top or the bottom.

That’s not really something that the stack is designed to do but if you want that effect then adding this CSS to the page should do the trick:

.scroller-header {position: relative !important}

1 Like

Thank you so much Stuart, for your help and time. That works.

It is not the purpose, and I do really enjoy the subtle effect.

Now I can close the w3schools link.

1 Like