Static/fixed content within page-content

Questions
1

I have a tab with a scrolling list of items. The tab has page-content to allow for scrolling.

But I want to fix a block of content at the top of the viewport, so I have a second page-content div child for the scrolling content. This allows the fixed block to remain at the top of the viewport, not scrolled.

That is, until I reach the end of the scrollable content. The fixed block then scrolls out of view.

Is there a better way to fix content (make static) within page-content so all content scrolls underneath it, and it remains where it is?

To better illustrate the problem, here is a JS Fiddle: https://jsfiddle.net/kerrydp/ku7cLmvw/15/

2

I was able to fix it via a post from here.

The solution was to remove to parent page-content and apply position: absolute to the scrollable area beneath.

(Additionally, I had to add padding-bottom: calc(230px + var(--f7-navbar-height) + var(--f7-toolbar-height)) to the scrollable area, as it wanted to push the height of the scroll region to below the viewport (where ‘230px’ is the height of the fixed element at the top of the page). Perhaps I’ll change this code to get the height of the viewport and subtract the height of the fixed element, the navbar and the tabbar.

Solution: https://jsfiddle.net/kerrydp/u2prq0ea/2/