Hello there! While I know there have been many questions regarding sticking a div to the top or bottom while scrolling, my particular issue is a bit more specific.
My dilemma is that I am looking for the div to stick either to the top or the bottom based on the user's scrolling direction.
To demonstrate the layout of the content, I have created this jsFiddle snippet: https://jsfiddle.net/DTcHh/6155/.
The desired outcome involves having the side content scroll simultaneously with the main content as the user scrolls. Once the end of the side content (top or bottom) is reached, it should then stick in place accordingly.
For instance, using the provided snippet, I aim for the side content to scroll down until "Fixed content Last." becomes visible, and then adhere to the bottom while the user continues scrolling downwards. If the user scrolls back up, the side content should mirror this movement by scrolling up until "Fixed content First." reappears, at which point it should affix itself to the top position.
This is how the HTML structure of the side content appears:
<nav >
<div id="filterAnchor"></div>
<div id="filterScroll" class="fixed_div">
Fixed content First.</br>
Fixed content.</br>
Fixed content.</br>
...
[more "Fixed content."]
...
Fixed content.</br>
Fixed content.</br>
Fixed content Last.</br>
</div>
</nav>