wlin wlin - 1 year ago 76
Javascript Question

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


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>

<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
, I try put it in the head, but I don't think it change anything.

Answer Source

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>

  <h3 class='text-center'>Foo Sticky, no sticky.</h3>
      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.

Hopefully this can get you started.