I gave you a working example here.
If you use the same classnames and html structure in your example then it should work ok.
If you can’t get it working then you will need to post your demo or at least the full html and css/js.
If you don’t understand how it is working then tell me what bits you are confused with and I will run through the workings.
The basics of the js method is that a dynamically created 1px x 1px div is inserted above the sticky element and the js (Intersection observer) watches until that element disappears above the viewport. Once it has disappeared we can assume that the sticky element must be sticky so it adds a class called
sticky-element to the sticky element so that you can change the colour and anything else that you want.
You don’t really need to know much more than that as long as your JS is addressing the correctly named elements. You can of course change all the class names to suit but you must do that in the js and the css.
Let me know which parts you don;t understand or what is troubling you. Otherwise post your full code and I will adapt to your exact code.