Bootstrap Scroll Spy с липкой навигационной панелью не работает должным образом

У меня проблема с компонентом Bootstrap Scrollspy.

Я использую sticky-top панель навигации, и когда нажимается кнопка навигации, она прокручивается до нужного элемента;

Но проблема в том, что липкая панель навигации перекрывает этот элемент.

Я пробовал использовать data-offset = "50" в теге 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 свиток работал как шарм. Но возникла другая проблема: в навигационной панели выделенный элемент становится предыдущим элементом.

На следующем снимке экрана я нажал Как это работает, и он прокручивался правильно, но выделенный элемент навигационной панели - это What is home eats, который является предыдущим. т.е. если я нажму на Проблемы, которые мы решаем, будет выбран Как это работает. Он всегда выбирает предыдущий.

Изменить решение

Я исправил вторую проблему, удвоив атрибут 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>

Raamyy 09.05.2020 источник

Ответы (1)

arrow_upward
2
arrow_downward

Проблема здесь возникает из-за того, что когда элемент с позицией fixed появился в браузере воспроизведения, он все равно перейдет к желаемому id, но не определит, что элемент с исправлением положения все еще существует, поэтому он проигнорирует его height и будет прыгать туда, где когда-либо элемент с определенным id соответствует верхнему элементу окна.

Итак, теперь вы должны позволить браузеру в каждом свитке, который вам нужен, прыгать, например:

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

Это полная статья это могло бы помочь больше.

ОБНОВИТЬ

Поскольку мы пошли дальше в этом решении, поскольку шпион прокрутки будет знать только, находимся ли мы в разделе с определенным идентификатором или нет, поведение шпионажа сбилось. Чтобы исправить это, есть несколько подходов, таких как добавление padding в каждый раздел в соответствии с навигационной панелью height или, как предложенный @Raamyy подход, мы можем определить data-offset в нашем теге body, опять же с высотой фиксированной навигационной панели. Дополнительную информацию о data-offset можно найти в этом.

SMAKSS 09.05.2020

comment

@Raamyy Это происходит потому, что вы все еще находитесь в предыдущем разделе и не вошли в раздел "Как это работает". Чтобы исправить это, есть несколько подходов. В каждом разделе можно применять отступы. Поэтому, если вы хотите применить такую вещь, вы должны применить высоту навигационной панели в качестве верхнего отступа вашего раздела. Если вы можете поделиться кодами разделов, я могу помочь с этим. - SMAKSS; 09.05.2020