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

Question

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

Version 6.2 Trying to implement Foundation 6's Sticky Menu, exactly as stated on the documentation but I can't init it. is there something obvious that I miss?

<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  -->

All the JS is right before </body>, I try put it in the head, but I don't think it change anything.

Answer 1

The Zurb Foundation 6 documentation isn't exactly helpful, and, your fiddle is working against you, slightly.

Here is a sticky title bar based on your code above. If you paste that directly into your fiddle html it will work. If you remove the <script>$(document).foundation();</script> from the bottom of the html and put $(document).foundation(); in the fiddle's javascript container, it will not. Also, notice the height in the title bar. Without the height and when scrolling back to top, the title bar shrinks.

You'll notice that the data-top-anchor="1" and data-btm-anchor="content:bottom" have both been removed. Either appear to ok to have in there, but if you add them both (as in the documentation), it doesn't work properly.

<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>

Hopefully this can get you started.

Here is the Zurb Foundation 6 documentation if you want to see an example of how not to do it: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation