title: React and Parallax : Misplaced parallax image when clicking on in-page navigation link
body: <p>I am using a React library called Rellax for a parallax effect on my site.
  It works nicely when I scroll towards that section of the page. But, when I click on the navbar and navigate to a particular #section, this very parallax image is floating in a completely different distance to where it was supposed to be placed.</p>
  
  <p>I have a feeling this is related to how the positioning of the element is calculated, since my page structure has no single main body but a group of react components.</p>
  
  <p>The same issue occurred with other parallax libraries.</p>
  
  <p>Right now I am referring to the parallax component this way: 
  (Code is abbreviated and only shows sections where I refer to the effect)</p>
  
  <pre><code>export default function Advantages() {
    useEffect(() =&gt; {
      // init parallax
      new Rellax('#parallaxImage', {
        center: true,
      });
    });
    return (
      &lt;section&gt;
          &lt;img 
            id="parallaxImage" 
            className="w-100" 
            data-rellax-speed="2" 
            src={ traktor }
            alt="tractor parallax" /&gt;
     &lt;/section&gt;
  )}
  </code></pre>