粘性标题栏不粘答案

【问题标题】：Sticky title-bar is not sticking粘性标题栏不粘
【发布时间】：2019-05-09 04:26:26
【问题描述】：

我正在使用 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>

【问题讨论】：

尝试在你的 css 上添加 .title-bar, .top-bar { position: fixed, top: 0;宽度：100%； }
解决了。把它放在一个答案中，我会接受它。仍然好奇为什么我的原始代码不能正常工作。
转念一想，我发现我无法将它锚定到一个元素上。
你不能将它锚定到一个元素上是什么意思？
假设我想将它锚定到标题的底部。它应该固定在标题的底部，直到标题滚动出视图，此时标题栏固定在视图的顶部。

标签： html css zurb-foundation

【解决方案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>

【讨论】：

奇怪地设置.title-bar, .top-bar { position: fixed, top: 0; width: 100%; } 没有帮助。相反，这个解决方案很有魅力。

【解决方案2】：

尝试在菜单容器上添加固定位置

.title-bar, .top-bar { 
    position: fixed, 
    top: 0; 
    width: 100%; 
}

【讨论】：