html - 粘性标题栏不粘

Question

我正在使用 Foundation 构建一个粘性菜单。顶部栏没有问题，但是当缩小到很小的标题栏时，标题栏就没有了。我错过了什么？

    <div data-sticky-container >
        <div id="mobileMenu" class="title-bar" data-responsive-toggle="main-menu" data-hide="medium"
             data-sticky data-options="marginTop:0;" style="width:100%"
             data-top-anchor="top">
            <button class="menu-icon" type="button" data-toggle="main-menu"></button>
            <div class="title-bar-title">Menu</div>
        </div>
    </div>
    <div data-sticky-container>
        <div class="top-bar" id="main-menu"
             data-sticky data-options="marginTop:0;" style="width:100%"
             data-top-anchor="1">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                     <!--links here-->
                </ul>
            </div>
        </div>
    </div>

Answer 1

这里的解决方案是将这两个元素包装在一个具有 sticky 属性的元素中:

<nav data-sticky-container>
    <div data-sticky data-margin-top="0" data-sticky-on="small">
        <div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium">
            <button class="menu-icon" type="button" data-toggle></button>
            <div class="title-bar-title">Mobile Menu Title</div>
        </div>
        <div id="menu" class="top-bar">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="has-submenu">
                        <a href="#">Drop Down Menu Option 1</a>
                        <ul class="submenu menu vertical" data-submenu>
                            <li><a>Sub-Menu Option 1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu Option 2</a></li>
                    <li><a href="#">Menu Option 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>