I have always used the dual iframe type for these simple apps.
Top Hype document holds the header and bottom navigation and an iframe sliding menu.
Bottom iframe Hype menu holds the content.
I want to go with the sticky option below, but am having trouble with the bottom navigation.
.fixed {
position: fixed !important;
}
(You might be wondering why change something that works (iframe) because it requires separate Hype due to platform differences, iframe scrolling differences, etc, one for Android/iOS. Wanting to go to the same file for both platforms and this will help.)
Your CSS looks fine to me to have a sticky; it might be useful to attach a zip of the .hype document to see what is going wrong. The best guesses blind would be:
Not using fixed as the class name for the element in the Identity Inspector
Apologies, I figured it out, between trying to make one version that will work for Android and iOS it got kind hairy.
The iOS scrolling issue with iFrames complicates the issue as does the Android fullscreen video button missing within two iFrames among other things. Managed to find a solution that works with both platforms.
Not a techie, but have managed to make 5 or 6 apps and making about 4 more simple apps.