I have a sidebar that is set to be sticky, but in some cases it is taller than the height of the screen.
If the sidebar ends up being larger than the screen height, I don't want it to stay at the top. Instead, it should scroll along with the content of the page.
To achieve this, I am using Bootstrap's 'sticky-top' class.
This class has the following properties:
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
In my case, I modified the 'top: 0' to 'top: 50px' because I require some space above it.
Here is an example code snippet: https://codepen.io/cray_code/pen/ZEaOXwo
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="toc sticky-top">
<nav class="list-group">
Links (see example)
</nav>
</div>
</div>
<div class="col-lg-9">
Content (see example)
</div>
</div>
</div>
I attempted a solution provided on this thread by adding the following code to my class:
.toc {
overflow-y: auto;
max-height: 100vh;
}
However, this did not solve the issue for me.
Is there a CSS-only solution for this problem, or do I need to resort to using JavaScript?