基础：粘性侧边菜单

Question

我正在尝试创建一个布局，其中有一个粘性 header 栏和一个位于 header 栏正下方和内容区域左侧的粘性右侧菜单。以下是我的尝试 - 这会导致手风琴侧边菜单（占位符）出现在错误的位置。

我刚刚使用了全新安装的站点基础 (6.5.3) 中的默认值 CSS 等。

为什么我的菜单（占位符）在我滚动时没有停留在原位？

    <div data-sticky-container id="header">
        <div class="top-bar" data-sticky data-margin-top="0">
            <div class="top-bar-left">
                <h3>Cool page title</h3>
            </div>
            <div class="top-bar-right">John Doe <a href="">Logout</a></div>
        </div>
    </div>

    <div class="grid-x">

        <div class="cell medium-3 show-for-medium" data-sticky-container>
            <div class="sticky" data-sticky data-top-anchor="header:bottom">
                <h3>Menu placeholder</h3>
            </div>
        </div>

        <div class="cell medium-9">
            <h1>
                Start content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
                content content content content content content content content content content content content content content content content content content content content content content content content 
            </h1>
        </div>

    </div>

Answer 1

将两个粘性组件固定到另一个将是一个挑战。相反，您可以使用 Foundation 文档中的示例，它非常相似。

https://foundation.zurb.com/sites/docs/

topnav 是常规位置固定的，body 向下填充以使导航 space。

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
 }

这是你的例子：https://codepen.io/rafibomb/pen/BbyRav

基础：粘性侧边菜单

Foundation: sticky side menu

zurb-foundation