Ha sh URL-ссылка на элемент с закрепленной позицией CSS стиль, вызывающий странное поведение прокрутки - PullRequest
0 голосов
/ 06 мая 2020

Возникла странная проблема при использовании URL-адреса ha sh для ссылки на элемент с position: sticky.

<a href="#myHeading">Go to heading</a>
<div id="myHeading">Heading</div>
<div>Some content that goes offscreen</div>
<div id="myHeading2">Heading 2</div>
<div>Some content that goes offscreen</div>

Таким образом, в приведенной выше разметке для заголовочных разделов установлено position: sticky. и когда я затем go щелкаю ссылку привязки в верхней части страницы, он правильно связывает заголовки, которые ниже текущей высоты прокрутки, но затем щелчок ссылки на заголовок выше текущей высоты прокрутки вызывает очень странное поведение, когда страница просто слегка прокручивается вниз каждый раз, когда я нажимаю. Количество, которое он прокручивает, похоже, связано с количеством top: Xpx, установленным для работы липкого позиционирования.

Кто-нибудь знает, почему это происходит, и если это ошибка с моей реализацией position: sticky (скорее всего) или ошибка браузера, или что-то неподдерживаемое. Я тестировал Chrome + Safari с теми же результатами.

Здесь создан полный пример https://codepen.io/robcalcroft/pen/QWjQdqL

...