Zurb Foundation Sticky问题:如果添加底部锚点，则停止工作

Question

我正在尝试实现在Zurb Foundation 6.4.3一页网站中使用粘滞的Advanced方法。我所有的组件都是最新的。

一切都很好，直到我添加了指定的data-btm锚点代码:如果我添加了这个代码(不管我在页面上的目标是什么，也不管我的目标是:top还是:bottom)，sticky就会停止工作(什么都不能保留)。

还有谁在使用data-btm-anchor时有问题吗？它看起来很简单，但对我来说却不起作用。

目标:左右3列各包含一个装饰性多边形，作为中心18列的边界(我使用24列网格)；中心18包含我的文本。整个部分有一个固定的高度(比如60vh，但实际上实际的尺寸是根据每个断点进行调整的)，并将overflow-y设置为滚动。这个想法是，当中心文本区域滚动时，边界多边形静止不动，直到我们到达该文本区域的末尾，此时粘性释放，整个页面继续滚动。应该很简单，对吧？

下面是我的HTML。忽略实际内容(文本)，因为它只是占位符；重要的是div和相关内容。我将从我想要粘滞的内容上面的行( div )开始，因为它是数据顶部锚点；我想要粘滞的内容下面的div有一个服务ID。再一次，我尝试使用data-btm-anchor="services:top“，也尝试了data-btm-anchor="slantsText:bottom"；也尝试了，只是测试一下，使用我的页脚ID。不管我输入什么ID作为我的data-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&nbsp;await&nbsp;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&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                          <p>Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.  Let’s talk about your industrial and/or retail space needs in light of our local markets that&nbsp;await&nbsp;you.</p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="small-3 medium-4 cell slantPolyR"></div>
      </div>
   </div><!--close slants-->
</div>

Answer 1

这是最奇怪的事情:如果我向id=“服务”中的一个单元添加一个ID，它就能工作！例如，如果我在我的data-sticky data-btm-id==“测试:顶部”上使用，那么，在我的服务“服务”中添加一个测试“测试”，这个id可以工作(同样，数据-btm-锚=“服务:顶部”不能)：

<!--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=-container”的div上？