Question

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

我刚从站点的全新基础（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固定在固定位置，身体向下填充以留出足够的空间来放置导航。

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

以下是您的示例：https://codepen.io/rafibomb/pen/BbyRav

基础：粘边菜单

1 个答案: