Question

版本6.2 尝试实施Foundation 6的Sticky Menu，完全如文档中所述，但我无法初始化它。有什么明显的东西我想念吗？

<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文档并不是非常有帮助，并且，您的小提琴正在对您不利。

这是一个基于上面代码的粘性标题栏。如果你将它直接粘贴到你的小提琴html中它将起作用。如果您从html底部删除<script>$(document).foundation();</script>并将$(document).foundation();放入小提琴的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

ZF6 Foundation Sticky不能开箱即用吗？

1 个答案: