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:

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

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);
2 Likes