How can I create a sticky banner under which the main Hype content can scroll past?

Elements
1

I’d like to keep the banner from moving while I scroll through the rest of the content.

https://dl.dropboxusercontent.com/spa/pz7zkjotn3kvbgp/Exports/pollins/pollins.html

I’m just starting, but need some help!

2

Yo can use CSS with “fixed”

<style type="text/css"> 
.sticky { position: fixed !important;} 
</style>

in this template you can find an example with a sticky nav

3

I’m sorry to sound stupid, but where am I adding this?

4

Add this code ( CSS) in Header

<style type="text/css"> 
.sticky { position: fixed !important;} 
</style>

Add the class to your image

try this example
example.hype.zip (1.6 MB)

…in the forum you can find several examples, better than mine :slight_smile:

5

Hi @michelangelo
Thank you for this simple code, i have just a problem, i have 2 layouts with a breakpoint at 1366px
This code works only on the ipad layout and not on the desktop.
Do you know how to fix this ?
Thanks

6

It might be useful if you can post a zip of your current .hype document. This could help figure out if there's a mistake or a strategy to advise on.

7

Formations_BUR_Logiciels-bureau_MIGRATION_VERS_OFFICE copie 6.zip (337,6 Ko)
Hi Jonathan, here it is, thank you !

8

Oups, no sorry, this one was another try.

This is the one based on michelangelo's code
Formations_BUR_Logiciels-bureau_MIGRATION_VERS_OFFICE copie 5.zip (378,2 Ko)

9

I think the issue is that on your desktop layout, you have all your items in a group that has a scaled width/height of 170%. This seems to interfere with the scale code (and in fact, scrolls the content in reverse).

As a side note to be aware of - these transforms don't come for free like one might expect in image/vector editing software where the output is a bitmap. Browsers themselves have to do a lot of work on the transforms, so I don't recommend using scaling to get the sizing you want - instead I'd work to correctly size the elements whenever possible. (Of course I know sometimes this can be tedious).

10

Yes you're right, thank you !

1 Like