Sticky object with animate HTML5

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;

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