Hey. Hey. I'm not a programmer 
Please, I need to do a STOP SCROLL at a certain point. That is, to make the element scroll, but only to a certain distance from the top of the web page. Please, does anyone have the HTML code for this? Thank you very much for the answer. Jakub
Hallo Jakub,
have a look at this example… should fulfill all your scrolling needs (and maybe even more like progress of symbols based on scroll), I updated the code with comments and added a little documentation:
Hi and thanks. So far, this seems to be it. But I don't know if I can get it to work yet But thanks
Using an entirely new document here… you can also just use my template and throw out the stuff on the stage (as it also contains the progress example). I am using the bounding box data attribute. You can also use start and end attributes, but that is more involved.
Perfect!!! thanks lot of
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
sticky_simple.hype.zip (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.
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