Sticky object with animate HTML5

[patrickb89495570]

Hello,

Is there a way for an object to be sticky in animate HTML5 ?

I searched the answer... but not a single clue

Thanks a lot

[StephaneHH]

Doing this with a canvas element may takes some extra steps compared to doing it with DOM elements (dependent on what you want to do).

- Is it the entire <canvas> you want to stick or is it some element within the <canvas>?

[patrickb89495570]

Hello Stephane,

it's some element within the <canvas>

[StephaneHH · Accepted solution]

The short answer is that this is a 2-step process because there are 2 contexts.

1. The context of the browser in which the <canvas> is positioned.

2. The context of the <canvas> in which your sticky-element is positioned.

So in order to position your sticky-element relative to the browser-context, you need to do these steps:

1. Find the position of the <canvas> on the screen (the inner-window of the browser).

2. Find the position of the sticky-element within the canvas.

3. Combine these two in order to get the position of your sticky-element relative to the browser.

I hope this makes sense.

A small and hopefully useful code snippet:

Below I have pasted some code I have used to get the position of a DOM element within the browser context.

You would wrap this in a function that is triggered by scroll and resize:

window.addEventListener("scroll", MyFunction);

window.addEventListener("resize", MyFunction);

I will leave the positioning inside Animate up to you

-------------------------------

// Find window inner height:

this.pageHeight = window.innerHeight;

// Get the element and its bounds:

this.ele = [The <canvas> DOM element]

this.bcr = this.ele.getBoundingClientRect();

// Find the position of the top pixel of the <canvas> in PIXELS and in PERCENT:

this.calcY = this.pageHeight - this.bcr.top;

this.pctY = this.calcY / this.pageHeight;

-------------------------------

[patrickb89495570]

Thanks a lot, your advices are really helpful

i tried but i think i'm a little too noob with function

I created a clip (Occurence name : ele)

and i pasted this code on the first frame

window.addEventListener("scroll", MyFunction);

window.addEventListener("resize", MyFunction);

// Find window inner height:

this.pageHeight = window.innerHeight;

// Get the element and its bounds:

this.ele = [The <canvas> DOM element]

this.bcr = this.ele.getBoundingClientRect();

// Find the position of the top pixel of the <canvas> in PIXELS and in PERCENT:

this.calcY = this.pageHeight - this.bcr.top;

this.pctY = this.calcY / this.pageHeight;

but it doesn't work

here is the file

https://we.tl/t-3H5HbUXPqQ

Thanks again

Patrick

[StephaneHH]

Okay I took a stab at your file but I am not gonna get you all the way to sticky-eness.

Halfway though.

It now contains a working function that measures its position in the browser and in turn positions the element at the top of the screen.

I also put in some <br> breakes above and below the canvas so you can scroll a long way (so the canvas will scroll all the way through the window).

# Notice that I unchecked "Overwrite hte HTML file on publish".

Check it out and play around with the code.

It sticks all the time now - see if you can prevent it from sticking except when it is about to scroll above the window.

Happy coding

https://drive.google.com/open?id=1ETUOIcDauMSQBytMefcn6k6594XqVnnQ

[patrickb89495570]

It's really perfect !!!!!

Thanks a lot for your answer and time