基础6 - 粘性导航

Question

我真的无法理解我所做的和基础6文档中的例子之间的区别： foundation.zurb.com

我想要的功能是当你滚动并经过我的子菜单时，它会粘在屏幕的顶部...而是当我从页面顶部向下滚动子菜单时到屏幕的顶部。我想要的功能与Foundation 6中的示例中的图像完全相同。

这是我的代码：

<div data-sticky-container>

<section class="panel-tan navigation-panel sticky"
         data-sticky
         data-margin-top="0"
         style="width:100%">
    <div class="show-for-small-only navigation-panel-icon">
        <i class="icon icon-add"></i>
    </div>

    <div class="row">
        <ul class="menu small-12 column">
            <?php

            // check if the repeater field has rows of data
            if( have_rows('navigation_items') ):
                $item_count = 0;
                // loop through the rows of data
                while ( have_rows('navigation_items') ) : the_row();
                $item_count++;
                ?>

                    <li><a href="#item-<?php echo $item_count; ?>"><?php echo the_sub_field('item_title'); ?></a></li>
            <?php endwhile;

            else : ?>
            <div class="column small-12">
                <p>
                    No Data Found!, please enter data in the columns field in the admin
                </p>
            </div>
            <?php endif; ?>
        </ul>
    </div>
</section>

</div>