移动/大型基础的粘性导航6

时间:2016-12-29 09:53:10

标签: jquery html css zurb-foundation

我想学习基础6但是我有很大的问题要理解为什么它不起作用以及我做错了什么。

我想为小型设备和中型/大型制作粘性导航栏。对于大型它确实有效,对于移动它不粘,只是停留在顶部....

我做错了什么?我添加div相同的大型数据粘性容器和粘性类.... 导航在大卷轴上,但小/移动导航不会滚动....

http://codepen.io/paulcrowski/pen/ENBJVe

<div data-sticky-container>
        <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
            <div class="off-canvas-content" data-off-canvas-content >
                <div class="title-bar show-for-small-only">
                    <div class="title-bar-left">
                        <button class="menu-icon" type="button" data-open="mobile-menu"></button>
                        <span class="title-bar-title">Menu ver0.1mob</span>
                    </div>
                    <div class="title-bar-right">
                        <button class="menu-icon" type="button" data-open="basket-right"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:2)

您需要将data-sticky-on="small"属性添加到data-sticky容器中。 data-sticky-on的默认值是中等。