0

This might be very specific but I am pulling my hair for over a week so I have to ask.

*** edit: i re-produced this bug (?) in codesandbox so you can check it yourselves: https://codesandbox.io/s/react-playground-forked-51r5n (the button is just to add/remove a class to the parallax-wrapper component to easily show the differences)

*** edit2: i believe it has something to do with the following: in App.js, there are 2 components, the Nav-component and the ParaWrapper-component. I believe, because I give the ParaWrapper a height of 100vh, the Nav has technically no height left (?). I still can see the Nav in the element inspector, and if i manually add the fade-in class, it works as intended. Maybe this is a clue for someone to solve this riddle?

Situation: react hooks are not working. My page consists of a parallax (scss only) hero section (2 layers, 1 base layer and 1 back layer), followed by a couple other regular sections. More specific: in my navbar component i use useeffect to determine if i already have scrolled for > 50 pixels, and if so, removes and adds classes to my navbar to show/hide it with an animation. It took a while for me to find out what caused the problem, but it seems that when I remove (or out-comment) the height of the para-wrapper component, the navbar animation is working as intended (useeffect hook is working), but the parallax-effect will stop working.

I've tried with useState hook as well but it's the same issue; set navbar classes won't work when height is set (and works when not set, but then again losing the parallax effect).

In element inspector i can see the classes are NOT applied properly when the height: 100vh is active on the para-wrapper, but it DOES work when the height is removed (which means the code works, but somehow it's being blocked).

  • edited this question and deleted all the code in here as i added a viewable project so you can work with it *

Thanks a lot for taking a look, I hope some of you can find the issue here. Regards

Robbert
  • 1
  • 3
  • That sure is a lot of code. Are you sure this is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? Anyway, it looks like you're only selecting the nav element on first render in Nav. Once React updates the DOM, that element (and its listener) will go away and a new one will be inserted (without the listener). I suspect that's the root of your problem. – samuei Jan 21 '22 at 22:18
  • Would this topic be of any help? https://stackoverflow.com/questions/44768695/image-with-parallax-effect-on-full-screen-page-without-scrollbars – Nikita Skrebets Jan 21 '22 at 22:32
  • @samuei the code works as intended when i turn the height of the parallax wrapper off (it worked perfectly before i implemented the parallax effect). i am only selecting the nav element (and it's children) because that element is the one i want to unhide/hide when scrolling on the page. – Robbert Jan 22 '22 at 06:31

1 Answers1

0

I found the answer to my question! Finally. What pointed me in the right direction what the answer on this topic:

Not getting callback after adding an event listener for scroll event in React.js

The complete answer consists of a couple of fixes. First , I had to move the eventlistener from the Nav component to the Hero component (duh, otherwise it would only listen when scrolling on the Nav component). Second, instead of using window.addEventListener, i had to use the element on which i was scrolling (so in this case, a variable which refered to the para-wrapper element). Lastly, window.scrollY always remained at 0, so i had to change window.scrollY here as well to (variable with reference to the para-wrapper element).scrollTop!

Robbert
  • 1
  • 3