我正在尝试在Zurb Foundation 6.4.3单页网站中实现使用粘性的高级方法。 我所有的组件都是最新的。
在我添加指示的数据 btm-anchor 代码之前，一切正常：如果我添加它(无论我在页面上定位什么 ID，也无论我的目标是 ：top 还是 ：bottom)，粘性停止工作(没有粘性)。
还有其他人在使用数据 btm 锚点时遇到问题吗？ 它看起来很简单，但对我不起作用。
目标：左右3列各包含一个装饰多边形，作为中间18列的边框(我使用24列网格);中间18包含我的文本。 整个部分具有固定的高度(例如，60vh，尽管实际上实际尺寸会根据断点进行调整)并且溢出-y设置为滚动。这个想法是，当中心文本区域滚动时，边界多边形静止不动，直到我们到达该文本区域的末尾，此时粘滞释放，整个页面继续滚动。 应该很简单吧？
下面是我的 HTML。 忽略实际内容(文本)，因为它只是占位符;重要的是div 和相关。 我将从我想制作粘性的行 (div) 开始，因为它是数据顶部锚点;我想制作粘性下面的div 具有服务的 ID。 再次，我尝试使用我的data-btm-anchor="services：top"，也尝试了data-btm-anchor="slantsText：bottom";还尝试使用我的页脚 ID 进行测试。 无论我输入什么 ID 作为我的数据 btm 锚点，粘性都停止工作。
注意：我的最终结束div 不断从我下面粘贴的内容中删除。 在我的实际代码中，所有结束div 都存在(在我注意到"关闭倾斜"之后有 2 个)。
<div id="cta">
<div class="grid-container">
<div class="grid-x align-center">
<div class="small-20 medium-16 cell">
<div class="grid-x grid-padding-x bodyRow">
<div class="small-24 cell">
<h2>Sign with IHI</h2>
<p>Let’s talk about your industrial and retail space needs <br class="show-for-medium">and our local markets that await you.</p>
<div class="text-center">
<div id="schedule">
<h6><a href="#/" class="secondary button btnStroked bPr" data-toggle="nPr" aria-controls="nPr">Schedule Your Meeting</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--close cta-->
<div data-sticky-container>
<div data-sticky data-margin-top="0" data-top-anchor="cta:bottom" data-btm-anchor="services:top">
<div id="slants">
<div class="grid-x align-center">
<div class="small-3 medium-4 cell slantPolyL"></div>
<div class="small-18 medium-16 cell slantsTextContainer">
<div class="grid-container">
<div class="grid-x grid-padding-x bodyRow align-center">
<div id="slantsText" class="small-23 medium-18 cell">
<h2>Sign with IHI</h2>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
<p>Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you. Let’s talk about your industrial and/or retail space needs in light of our local markets that await you.</p>
</div>
</div>
</div>
</div>
<div class="small-3 medium-4 cell slantPolyR"></div>
</div>
</div><!--close slants-->
</div>
这是最奇怪的事情：如果我在id="services"中的一个单元格中添加一个ID，它就可以工作了！ 例如，如果我在我的数据粘性上使用data-btm-anchor="test：top"，那么在我的id="services"中添加一个id="test"，该id有效(而data-btm-anchor="services：top"则不然)：
<!--reopen contained grid container-->
<div id="services" class="grid-container">
<div class="grid-x grid-padding-x bodyRow2 align-center">
<div id="test" class="small-8 medium-6 large-4 cell redEmphH"></div>
</div>
ID 是否需要在单元格上，而不是例如在 class="grid-container" 的div 上？