Stop scrolling at a specific point

Perfect!!! thanks lot of :slight_smile:

it's doing to me what it's doing to you. But I need the element to stop, say, 200px from the top and not move again. This one will start up again after a while.

That is easy… instead of using the bounding box (data-sticky-bounding) you can use manual parameters. If you set the top for sticky by using data-sticky-start with a number (top offset). If you don't use data-sticky-end … it will remain sticky.

And can't you just do the whole thing via the "element ID" and then just the HTML entry in the HTML head? Something like "this ID scroll and at 200px from the top stop" ??? I don't know where to write what you write or where to look for it. Thanks (39,4 KB)

you own Hype Professionell? otherwise you won't be able to set the necessarily dataattributes within Hypes UI ...

To get it work just set the dataattributes in the element panel ...

One attribute to activate the handler:

data-document-scroll-action -> scrollHandler()

next attribute to feed the handler

data-sticky-start -> 1000

so the sticky will start when the documents scrollposition is 1000. the element will be at top at this moment

Yes, this works, and thank you. But only if you scroll down. When you scroll back, the element doesn't go back into place. And yes, I have the professional version. Look at the element, please. Thanks.

When I look into your HTML, there are no "data-sticky-" attributes…
not sure what I should be looking for? The header is a straight-up position fixed rule.

Can you take a look at this, please? Thank you very much. I'm not really a programmer

You don't provide much information. What element is it you want to make sticky? Okay I found it … it's the Kategory on the side.

the 'kat'-element in the biggest layout ... but it works for me ...

That's what I mean… with fiddling with sticky start. If you want to avoid doing that remove data-sticky-start altogether, and it will determine start base on its top position automaticity. Just use the group around your kategory to position it.

CleanShot 2022-11-24 at 16.06.02@2x
If you don't want to fiddle around with start values or use the bounding option remove these
data-sticky-start and use the group start (autodetected). Hence, when the to border of the group reaches the top browser position, it becomes sticky automatically

Also, don't nest it in another group (like body) as the group also has an offset and the math doesn't work in that case. Keep it at top level. It you really need to nest a scrollable sticky element deeper use a group that starts at 0,0!

Some generals advise. To reduce redundancy, you can use symbols in you build.

1 Like

Hello again Hans @h_classen!
This solution it is not functional if I export the file as OAM Widget.
Do you any idea how to have it functional when I export it as widget?
Thank you!

i guess you're trying to do this: Wordpress plugin - no javascript files or <head> in embedded OAMs - #2 by Daniel

1 Like

Yes, thank you, you are right.
As I export the file as HTML, the sticky function is ok.
As I export to OAM Widget and import it to WordPress, the the sticky function is no more recognised.
I guess that the WordPress page height is not recognised...

the head-html is stripped when imported to wp using the plugin and div ... so the the library is not loaded. so make sure the library is loaded in wp ... please read up in the forum and the post of Daniel i shared above ...

1 Like

Thank you.
I changed from div to iframe, but there is no difference in functionality.
Anyway, I was trying to avoid to use iFrame.

think an iframe as a different browser-window ... so the iframe-embed will only work inside the "Hype-window". the only chance to get it work in wp is with oam and plugin and div-embed AND load the library in wp ...

1 Like

Thank you for your answers and support!

1 Like

This is it :slight_smile: thanks a lot for your help and empathy :slight_smile: