title: How to make a div stick to top or bottom, depending on how the user is scrolling?
body: <p>Hello. I know there are a lot of questions about sticking a div to top or bottom when scrolling, but my problem is more specific.</p>
  
  <p>The problem is that I want the div to stick to the top or the bottom, depending on how the user scrolls.</p>
  
  <p>I made this jsFiddle snippet to show how the content is set up: <a href="https://jsfiddle.net/DTcHh/6155/" rel="nofollow">https://jsfiddle.net/DTcHh/6155/</a>.</p>
  
  <p>The result I want is: whenever the user is scrolling, the content on the side should also scroll at the same time with the other content. If the content on the side reached the end (top or bottom), then it should stick to the top or bottom (depending on where the end of the content is reached)</p>
  
  <p>For example, in the snippet I provided, I want the content on the side to scroll until the "Fixed content Last." is visible, then stick to the bottom as the user scrolls down. Now, if the user scrolls up, I want the side content to also scroll up until "Fixed content First." is visible, then stick to the top.</p>
  
  <p>Html of the side contnet:</p>
  
  <pre><code>&lt;nav &gt;
        &lt;div id="filterAnchor"&gt;&lt;/div&gt;
        &lt;div id="filterScroll" class="fixed_div"&gt;
            Fixed content First.&lt;/br&gt;
            Fixed content.&lt;/br&gt;
            Fixed content.&lt;/br&gt;
            ...
            [more "Fixed content."]
            ...
            Fixed content.&lt;/br&gt;
            Fixed content.&lt;/br&gt;
            Fixed content Last.&lt;/br&gt;
        &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>