Collapse Element on Window Scroll event?

Hi

I am trying to implement a functionality wherein:

I have  a page with multiple panels. I have made the panels expand and collapse enabled.

When I scroll my page, I would like to be able to collapse the panel, which goes out of scope.

I tried to apply the logic of reducing the height of the panel for doing this. However, since it needs window.scrollTop to generate the condition to collapse or expand the pane, based on the position of the scroll, it is impossible at the moment.

I found that we cannot use the window.scrollTop() functionality on SAPUI5 controls. It always ends up gving a 0 value.

Is there any other way to implement this?

Can someone please guide me on this??

Here is an example of what I am trying to achieve in SAPUI5. Please help!

Edit fiddle - JSFiddle