У меня проблема с компонентом Bootstrap Scrollspy .
Я использую панель навигации sticky-top, и при нажатии кнопки навигации выполняется прокрутка до нужного элемента ;
Но проблема в том, что липкая панель навигации перекрывает этот элемент.
Я пробовал использовать data-offset = "50" в теге body, но это ни на что не повлияло.
Тег body :
<body data-spy="scroll" data-target="#sectionsNav" data-offset="50">
Тег тела css:
body {
position: relative;
overflow-y: auto;
}
Панель навигации:
<nav class="navbar navbar-light bg-light sticky-top">
<div id="sectionsNav">
<ul class="nav nav-pills text-center">
<li class="nav-item">
<a class="nav-link" href="#wihe">What is Home Eats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hiw">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pws">Problems we Solve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#jhen">Join Now!</a>
</li>
</ul>
</div>
</nav>
Как это работает div:
..
<div id="hiw" class="container">
...
..
.
</div>
..
Ожидаемое поведение при нажатии Как это работает кнопка в навигации:
Происходящее поведение:
Обратите внимание, что: Навигационная панель находится над Как это работает заголовок.
Редактировать
После применения @SMAKSS ответ свиток работал как оберег. Но возникла другая проблема: на панели навигации выделенный элемент становится предыдущим элементом.
На следующем снимке экрана я нажал Как это работает , и он прокручивался правильно, но выделенный элемент панели навигации Что едят дома предыдущее. 
т.е. если я нажал на Проблемы, которые мы решаем, , Как это работает становится выбранным. Он всегда выбирает предыдущий.
Изменить решение
Я исправил вторую проблему, удвоив атрибут data-offset до 100 . код теперь выглядит так:
<head>
<style>
html {
scroll-padding-top: 70px;
}
body {
position: relative;
overflow-y: auto;
}
</style>
</head>
<body data-spy="scroll" data-target="#sectionsNav" data-offset="100">
...
.
</body>