Here the reproduction: https://jsbin.com/lawafu/edit?html,output
Is this a bug? A mistake? A problem? An unrealizable idea?
Before scroll:
After scroll:
What I need:
Obviously I need to see the sidebar when I scroll down the page, using padding-top of the body for the fixed-top navbar.
I'm using this code for the sidebar:
<div class="sticky-top">
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Bootstrap sticky-top
has no offset for the Navbar since it sets top:0
. You can add a custom class to account for the Navbar height.
.sticky-offset {
top: 56px;
}
<div class="sticky-top sticky-offset">
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Demo: https://www.codeply.com/go/QeJOvbYswd