How to iterate through cms collection list?

Hi!

I store a list of items in a CMS collection and I display covers on my homepage (Cover photos, title, subtitle). Each item have its own background color.

What i need to do, and for which i have no idea how to:

  • my Banner should get its background color from the first visible item displayed (eq: the item displayed just under the banner when you scroll)

  • my Footer should get its background color from the last visible item displayed (eq: the item displayed just above the footer when you scroll).

in both cases I need to iterate through the collection using javascript and manage to find the needed item… but i have no idea how to achieve this (maybe by getting each item top position on screen?).

Thanks for any help !

Fred

Here is my public share link: LINK
(how to access public share link)