In order to achieve vertical scrolling of a sidebar div and its content (3 links) between two points, I have utilized the CSS property position:fixed; top: 100px. While this setup works well initially by positioning the sidebar 100px down from the top and enabling vertical scrolling as the user scrolls down the page, I am encountering an issue. How can I make it stop just before reaching the footer? Below is what I currently have:
HTML
<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
CSS
.scroll {position: fixed; top: 450px;}
Thank you,
Andy ;-)
I have included more code below to provide a clearer understanding of my requirements. Here is the JSFiddle link for reference: https://jsfiddle.net/mwt4x90d/
The Javascript code should be placed before the closing scroll div in the HTML file. However, due to separation constraints, jsfiddle requires it to be separated.
While I managed to get it working, I am facing two issues. First, the outer div (sidebar) collapses leaving just a line above the scroll div. Second, the div doesn't stop above the Left Box / Pagination section, regardless of the value used inside the parenthesis. As I am using a Liquid layout, it might be impacting the behavior.
If anyone can pinpoint where I may be going wrong, your assistance would be greatly appreciated. Since I lack knowledge in JavaScript, I'm relying on guidance provided here. Thank you for any help, Andy ;-)
HTML
(Refer to original HTML structure for detailed contents)
CSS
(Refer to original CSS styles for detailed information)