How to determine the start and end position of a fixed accordion head?

Question

JavaScript

Hello, there is a side menu that contains a number of accordions, the accordion consists of a header and retractable content (nothing new), when the accordion is opened when scrolling, a class appears at the header, exactly if they started scrolling, i.e. opening the accordion, initially the header does not have this class, we start scrolling, a class appears, when we scroll to the end of the accordion content, this class disappears, and all accordions should have this functionality.
Below is an example, here a shadow appears when we scroll, and if we return to the initial position, it disappears, it works, but there is the problem described above
https://stackblitz.com/edit/accordion-sticky