javascript - ZF6 Foundation Sticky 不能开箱即用？

Question

https://jsfiddle.net/ffzgmky7/1/

版本 6.2尝试实现 Foundation 6 的粘性菜单，完全按照文档中的说明进行操作，但我无法初始化它。有什么明显的我想念的吗？

<div style="height:9999999px">
    <div style="width:100%" data-sticky-container>
        <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1" data-btm-anchor="content:bottom">
        <div class="title-bar-left">EXAMPLE</div>
        <div class="title-bar-right">STICKY</div>
    </div>
</div>

<link rel="stylesheet" href="{{ url('bower_components/foundation-sites/dist/foundation.min.css') }}" type="text/css">

<script src="{{ url('bower_components/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ url('bower_components/foundation-sites/dist/foundation.min.js') }}"></script>
<script src="{{ url('js/script.js') }}"></script>
<!-- $(document).foundation(); in js/script.js  -->

所有JS都在</body>之前，我试着把它放在头上，但我认为它不会改变任何东西。

Answer 1

Zurb Foundation 6 文档并不是很有帮助，而且您的 fiddle 对您不利，有点。

这是一个基于您上面的代码的粘性标题栏。如果您将其直接粘贴到您的 fiddle html 中，它将起作用。如果删除 <script>$(document).foundation();</script>从 html 的底部并输入 $(document).foundation();在 fiddle 的 javascript 容器中，它不会。另外，请注意标题栏中的高度。没有高度并且当滚动回到顶部时，标题栏会缩小。

您会注意到 data-top-anchor="1"和 data-btm-anchor="content:bottom"都已被删除。两者似乎都可以，但如果您同时添加它们(如文档中所示)，它就无法正常工作。

<div style="height:9999999px">
  <div data-sticky-container>
        <div class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%;height:45px;" >
            <div class="title-bar-left">EXAMPLE</div>
            <div class="title-bar-right">STICKY</div>
        </div>
  </div>

  <h3 class='text-center'>Foo Sticky, no sticky.</h3>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, temporibus a reprehenderit, adipisci expedita nam odio neque alias eligendi, consectetur sapiente dicta tenetur perspiciatis. Aspernatur modi provident obcaecati impedit dignissimos.
  </p>
</div>
<script>$(document).foundation();</script>

希望这可以帮助您入门。

如果您想查看如何不这样做的示例，请参见 Zurb Foundation 6 文档:http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation