Fade out/hide a target when scroll max-bottom

[acetteadresse]

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…

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 :

Edit fiddle - JSFiddle - Code Playground

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 )

thank you sooooo much for your help

[acetteadresse]

If nobody answers it’s because it not interesting, because it’s incomprehensible
or because it’s too difficult ?

[Paul_Wilkins]

It can be tricky working with scrollable elements.

I’ve used a scrollBottom value to try and make things easier to understand when doing this.

const scrollable = document.querySelector("#content");
scrollable.addEventListener('scroll', function(e) {
  const el = document.querySelector("#b");
  const scrolled = scrollable.scrollTop + scrollable.clientHeight;
  const scrollBottom = scrollable.scrollHeight - scrolled;
  if (scrollBottom === 0) {
    el.setAttribute('class', 'hidden');
  }
}, false);