Я нахожусь в процессе создания липкого navbar, используя Stickybits. Я вижу применяемые классы и position: sticky, а также мое смещение, но элемент все равно продолжает прокручиваться с остальной частью страницы.
Мой вопрос, требует ли он, чтобы родительский элемент имел набор высота? Из их документации они говорят:
Ключевое примечание: Stickybits ожидает и работает лучше всего, когда элемент, который станет липким, обернут в родительский элемент, который определяет, когда элемент начинает быть липким и перестает быть липким.
Что именно они здесь значат? Они говорят, что родительский элемент должен иметь определения относительно высоты и расположения?
Это то, что у меня сейчас есть:
$('.test').stickybits({ stickyBitStickyOffset: 82 });
$('.wsmainfull').stickybits({ stickyBitStickyOffset: 140 });
Элемент .test не имеет установить высоту.
<div class="wsmobileheader-bottom test" style="position: sticky; top: 82px;"> ... </div>
Источник HTML
<div class="wsmobileheader clearfix ">
<div class="wsmobileheader-top">
<a id="wsnavtoggle" class="wsanimated-arrow"><span></span></a> <span class="smllogo">
<picture>
<source data-srcset="assets/media/images/logo-header-horizontal.webp" type="image/webp">
<source data-srcset="assets/media/images/logo-header-horizontal.png" type="image/png">
<img src="assets/media/images/logo-header-horizontal.png" class="lazy" alt="logo"> </picture>
</span> <a href="tel:123456789" class="callusbtn"><i class="fa fa-phone" aria-hidden="true"></i></a>
</div>
<div class="wsmobileheader-bottom test"> <a href="tel:123456789" class="btn cta-form"><i class="fas fa-phone-alt"></i> Tap To Call</a> </div>