时间戳

首页 > 解决方案 > StickyBits 不粘

jquery - StickyBits 不粘

问题描述

我正在使用 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>

标签： jqueryhtmlcss

解决方案

推荐阅读