I would like to create a new “sub” header when i scroll my website page…
To put it in more clear words :
1- you got a basic landing page with a fixed header to the top of the screen even if you scroll.
2- by scrolling a horizontal submenu appears (basic construction of the landing page).
3- when you’re about to scroll more, the submenu don’t disappears at the top of the page but it fixed itself to the bottom of the header so that it could be always displayed on the page if you want to continue to scroll…
I don’t know if it’s possible but if someone has a solution you got all my attention, thanks !
(i’m very sorry about my approximative english)
hey @fayewatson,
Thank you very much for your answer
Yes this is the kind of stuff i’d like to set up, there’s some difference in what i would like to do but I think (hope) I can manage it. Can i ask a question more ? how do you do for your element becomes visible only once the current scrolling position of the page is greater than a number of pixel, please ? I found an option in the workflow setting page but can’t figure out how to make it work… Maybe my floating groups are not well organized…
In any case, thank you very much, you are very helpful !
My pleasure! And sure! For the element to only become visible after a certain scroll position, it’s easiest to set this as a conditional statement. In this example, the floating header has this one:
Along the same lines, what I’ve done is put both my “main” (thick) header and my “secondary” (thin) header in the same reusable element. Each is it’s own Group within the header, so that there are only two top-level elements total. Then I put a visibility condition to hide the main header Group when scroll point > 100. I also checked the property “Collapse element’s height when hidden” on that Group.
The net effect is that on page load you see the nice wide header (both header and subheader together – they have different information in my case), but after scrolling, the main header disappears and the subheader locks to the top of the page.
It’s a nice effect and gives the page more vertical space when users (via their scroll) “commit” to reading/exploring the page.
If your main and secondary headers contained the same information and the differences were just stylistic, you could use the same process except also set the secondary header to not visible (and collapsed height) on load and only make it appear at the same scroll point that the main header disappears.
Is something like this what you’d like to set up?
