Setting up this middle div on a page presents the following situation:
- The Top Bar should remain sticky and stationary
- The Middle section should scroll as new content is added or if the user scrolls up or down
- The Bottom Bar should also remain sticky in its position
Encountering multiple issues, fixing one problem only leads to another. Depending on how the CSS is configured, there are instances where the top or bottom bars may overlap onto the right sidebar without any clear reason. Though the code below might seem complex, it has been structured this way to allow for easier collaboration with others who can view and work within the existing framework. The actual code functionalities are controlled by JavaScript, so typically, it's not as cumbersome.
It cannot be emphasized enough that I come from a backend background and have spent three days grappling with these concepts independently, which has led me to the edge of sanity.