ZF6 Foundation Sticky 不能开箱即用？

Question

版本 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 中，它将起作用。如果您从 html 底部移除 <script>$(document).foundation();</script> 并将 $(document).foundation(); 放入 fiddle 的 javascript 容器中，则不会。另外，请注意标题栏中的 height。没有高度并且当滚动回到顶部时，标题栏会缩小。

您会注意到 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

ZF6 Foundation Sticky 不能开箱即用？

ZF6 Foundation Sticky don't work out of the box?

javascript

jquery

sticky

zurb-foundation-6