scrolly | Super simple and easy to use parallax plugin | Animation library

In list adapter you shouldn't store the items in a field inside the adapter class if you want to access a specific item you can use this code:

As you can see in the following screenshots this is not infinite either:

first row with "We are trusted by over 28,000..." and second row

It's just that on normal screen you can't reach the end of the element.

You can accomplish something similar by adding an listener on scroll and transforming the element you want to be moved retative to window.pageYOffset value.

Something like:

Add the scroll event handler in the mounted() function and change the isSticky variable there.

onScroll function destroyed and created again on every re-render when states changes so its object id change too. and the one defined on useEffect shouldn't be changed.

You need to use useCallback to prevent this behavior and wrap onScroll in it.

and also addEventListener to the window, because you are reading pageYOffset, scrollY from window on the onScroll function

Remove the double quoting.

use position = 'translate(0,' + '-' + y + 'vh)'

Or even better use template literals so

If you try simple code that on click handler setState and if you click two times and in each update state with same value the component again re-render. As react doc says:

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.

I hope the answers from this post and this github discussion help you to understand why this happens

and there are another related topics like this post and this one

Your issue is that you're adding your event listeners initially when the page loads. This means that your for loop that adds your event listeners will only loop over the video-container elements that are present on the initial load of your page. Any video-container elements created after you've added your event listeners won't have an event listener attached to them. Even if you are using .cloneNode() on an element that has an event listener attached with addEventListener(), the event listener won't be copied across to the new element as addEventListener() event handlers are not copied.

One idea is to add a new event listener to videoComponent every time createVideo() is called. The problem with this is that this can lead to you adding many event listeners to your page, which can slow down the performance of your webpage.

A better idea is to use event delegation. The idea of event delegation is that you can add your event listener to one parent element (in your case the element). When one of your video-container elements nested under the parent element is clicked, the click event will "bubble" up to the element, triggering the click event listener on the parent element. Within the event listener attached to the parent element, you can obtain a reference to the originally clicked video-container element using e.target, where e is the Event object provided in the event listeners callback function. As the click event listener is on the parent main container, the click event listener for any newly created children elements will work, as the event from the child element will bubble up to the parent main container's event handler.

To achieve event delegation in your code, you can remove your for loop that adds the individual event listenerrs and instead add your click event listener to your mainContainer element. This will capture click events that bubble up to it when its children are clicked:

You need to add background-color and color property to the header selector not header .sticky.

As you're dynamically adding the sticky class, so at first render the colors are not actually visible.

UPDATE

Checked your codepen and you're missing the property when .sticky class is applied via JS

I didn't quite understand what you want but just in case you want the sidebar to be sticky and when you go down to the footer it is above that block you have to get the sidebar code out of div class="main-content" like that