Question

我正在使用Foundation来构建一个粘性菜单。顶杆没有任何问题，但当缩小到小时，标题栏不会粘住。我错过了什么？

Logger

Answer 1

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

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

Answer 2

这里的解决方案是将两个元素都包装在具有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>

粘性标题栏不坚持

2 个答案: