Bootstrap Affix Content scrolls to far up on screen - html

Question

I use the basic Bootstrap Affix method to scroll to sections when clicking on a list group item.
This all works well.
The issue is, the content's title (anchor) disappears behind the header section of my pages
With fixed Top Navigation, it disappears behind the Menu, if the Top navigation is not fixed, but The WP Admin Toolbar is visible (logged in user), it disappears behind the Admin Toolbar.
Is there any way to set a kind of "Top Margin" for the title (anchor), so it will not scroll that far up?
To xplain better see this screenshots:
BEFORE
AFTER
I do not use JS but use just simple HTML for it.
Here the Mockup:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 hidden-xs">
<!--Affix start-->
<div data-spy="affix" data-offset-top="0">
<div class="list-group">
Section I
Section II
Section III
Section IV
Section V
</div>
</div>
<!--Affix end-->
</div>
<div class="col-sm-9">
<!--Content start-->
<div class="wrapper">
<div id="section-2" class="section">
<h3>Section I</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-3" class="section">
<h3>Section II</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-4" class="section">
<h3>Section III</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-5" class="section">
<h3>Section IV</h3>
<p>...</p>
<p>...</p>
</div>
<div id="section-6" class="section">
<h3>Section V</h3>
<p>...</p>
<p>...</p>
</div>
</div>
<!--Content end-->
</div>
</div>
</div>
I have also tried to play with data-offset-top, but that is not even influencing the content, it is intended for the List (where you click to scroll-to)
Anybody has a idea why this is happening and how I could have the "Title" of post (my actual anchors) as the "upper limit" so that "titles" won't disappear behind the Menu/Admin bar?
Appreciated...
This solutions I already tried:
Not working, completely out of scope (padding to body won't solve anything here)
Bootstrap affix issues with sticky top navigation
CSS solution that will break the scroll experience and is not working in my case, I did not try yet the JS solution...
Div anchors scrolling too far

Answer 1

Try to combine positive padding-top and the same negative margin-top for .section
$(document).ready(function(){
$("#nav").affix();
});
.section {
padding-top: 26px;
margin-top: -26px;
}
.section:first-child {
margin-top: 0;
}
#nav {
width: 170px;
margin-top: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 hidden-xs">
<!--Affix start-->
<div id="nav" data-spy="affix" data-offset-top="0">
<div class="list-group">
Section I
Section II
Section III
Section IV
Section V
</div>
</div>
<!--Affix end-->
</div>
<div class="col-sm-9" style="overflow: hidden;">
<!--Content start-->
<div class="wrapper">
<div id="section-1" class="section">
<h3>Section I</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-2" class="section">
<h3>Section II</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-3" class="section">
<h3>Section III</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-4" class="section">
<h3>Section IV</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="section-5" class="section">
<h3>Section V</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
<!--Content end-->
</div>
</div>
</div>