Fixed Menu on scroll screen (iPhone X)

Known Issues
1

Dear all,

I wanted to create an interactive CV with Hype.
In this example, you will find 3 scenes : Home page (with a list of 2 experiences), and 2 detailed pages: Marketing Director and Sales Director.
I wanted to implement a fixed menu on the top with a back button, in order to come back at the home page.
In the html edition, I include this code:

19
Capture d’écran 2019-07-18 à 14.36.19.png1100×370 36.2 KB

In the information properties of the Back Menu group, I insert “fixed” in the class field.
38
Capture d’écran 2019-07-18 à 14.39.38.png2336×1414 450 KB

In the preview windows all seems to be fine: to Back menu stay on top during the scroll. But in Preview device mirror (on iPhone) the Back Menu is white (Title and Left Chevron are invisible) and doesn’t stay fixed.
I included also links to go back at home page.
In attachment the hype file zipped :
Test Hype.zip (481.1 KB)

2

Can you help me to correct the file in order to fix my issue ?
In the following video, the preview in the Hype is OK :

In the following video, the preview in Hype Reflect isn’t OK :

3

hype behaves quite strange on position fixed … though its comprehensibly that not all css from outside is reliable for hypes runtime …

did you try aasigning the class fixed onsceneload¿

element.querySelector('.toFix').classList.add("fixed");

not sure if it works …

4

Checking Position with CSS left/top in the Document Inspector will help. There’s still some clipping from the bounce though.

5

Dear Tumult team,
Can you add a feature, very simple :
After selecting element, in the Inspector, just check a checkbox “Fixed on screen”.
By adding this, we could add a Tab bar menu, Top menu, or fixed Background, in order to create very complete web app.
Please help us!!!:crossed_fingers:

2 Likes
6

It seems a common feature request :grinning: