wlin wlin - 7 months ago 41
Javascript Question

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

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

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.

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