基础:粘性侧面菜单

问题描述 投票:0回答:1

我正在尝试创建一个布局,带有一个粘性标题栏和一个粘性右侧菜单,它位于标题栏的正下方和内容区域的左侧。以下是我的尝试 - 这会导致侧手风琴菜单(占位符)出现在错误的位置。

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

当我滚动时,为什么我的菜单(占位符)不能保持原位?

https://codepen.io/anon/pen/xBKaLq

    <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>
zurb-foundation
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.