ZF6 Foundation Sticky не работает из коробки?

Question

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

Version 6.2 Попытка реализовать Sticky меню 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 не совсем полезна, и ваша скрипка немного работает против вас.

Ниже приведена липкая строка заголовка, основанная на вашем коде выше. Если вы вставляете это прямо в свой скрипт html, он будет работать. Если вы удалите <script>$(document).foundation();</script> со дна html и поместите $(document).foundation(); в контейнер javascript для скрипки, это не произойдет. Также обратите внимание на высота в строке заголовка. Без высоты и при прокрутке вверх, строка заголовка сокращается.

Вы заметите, что оба устройства были удалены и 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> 

Надеюсь, это поможет вам.

Вот 6 документация Zurb Foundation, если вы хотите, чтобы увидеть пример того, как не делать этого: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation