title: React JS hide div while scrolling another div
body: <p>I am trying to hide one div during scrolling another big scrollable div.
  I have tried doing this via jQuery, but I faced several problems working on mobile devices and was told not to use jQuery with React. So I would like to implement this with pure js or css.</p>
  <p>I have seen several tutorials but all they use <code>position: fixed/absolute</code> parameter and then during scrolling change the position with negative numbers. This doesn't work for me, as I can't use this position pramaeter.</p>
  <p>I would like to provide code snippets.
  This is div that needs to be hidden.</p>
  <pre><code>    &lt;div className=&quot;heading&quot;&gt;
        &lt;h1 className=&quot;heading-text&quot;&gt;Заклади для вас&lt;/h1&gt;
        &lt;div className=&quot;filter&quot;&gt;{filterIcon}&lt;/div&gt;
      &lt;/div&gt; 
  
  .heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 90px;
    max-width: 425px;
    margin: 1em auto 2em auto;
  }
  </code></pre>
  <p>This div is scrollable</p>
  <pre><code>   &lt;div className=&quot;badges&quot;&gt;
       //for instance//
       &lt;p&gt;something&lt;/p&gt;
       &lt;p&gt;something&lt;/p&gt;
       &lt;p&gt;something&lt;/p&gt;
     &lt;/div&gt;
  
  
  .badges {
    max-width: 315px;
    height: 80vh;
    padding: 20px 7% 0px 7%;
    margin: 0 auto 0 auto;
    overflow: scroll;
  }
  </code></pre>
  <p>Have already tried many variants of realization but nothing worked. Hope you will help me.</p>