Fade out/hide a target when scroll max-bottom

Hello !
I have a last hard move to finish a website, I don’t know how to manage it, I’ve tried it in many ways but I can’t do it on my own… :frowning:

It’s a two side web site (white-left and grey-right).
I would like that when we scroll at the end of the right part, the right part disappears.
exemple : I clicl on “b” > “this is b div” appears > then I scroll to “end - right part” and all this right part dissappears with a beautiful fade out.

website :
https://jsfiddle.net/onmouseclick/pg1bwzh5/

For now this is the best I have : https://jsfiddle.net/onmouseclick/3zrxf8ym
(scroll the right part at max it works !! but I don’t manage to make it on a menu with target :sob:)

thank you sooooo much for your help :black_heart: