Javascript 基础6,粘性菜单和帆布位置固定

Javascript 基础6,粘性菜单和帆布位置固定,javascript,html,css,wordpress,zurb-foundation,Javascript,Html,Css,Wordpress,Zurb Foundation,目前使用基础6的画布,基本HTML在这里 <div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">

目前使用基础6的画布,基本HTML在这里

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
            Menu off canv
        </div>

        <div class="off-canvas-content" data-off-canvas-content>
            <div class="top-bar-container" data-sticky-container>
                <div class="sticky" data-options="marginTop:0;" data-sticky data-sticky-on="small" style="width:100%;">
                    <div class="top-bar">
                        <div class="row column">
                        columns content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

菜单关闭canv
栏目内容
这里的问题是,当用户滚动并单击offcanvas菜单时,他们会被带到顶部(与基金会的文档相同),当他们再次向下滚动时,粘性菜单的行为非常有趣

此外,当用户滚动时,OffabV画刷菜单不粘在一边,这也是基金会DOC所做的事情。

我注意到,当切换时,在大包装上有一个is open类,它执行css转换x 这就是从绝对位置打破粘性的原因

当我将该类切换到左边边距时:-250px;一切都恢复正常了

我在网上搜索,但找不到任何相关的东西,我想知道这是因为我的html结构不正确,还是真的是一个bug

<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right" data-force-top="false">
我的css重新构造以使用好的旧边距负片

这些变化使它看起来和以前一样

.off-canvas.position-right { position:fixed; right:-250px; top:0; z-index:1; transition:0.5s ease; }
.is-open-right .off-canvas.position-right { right:-0px; }
.admin-bar .off-canvas.position-right { top:32px; }
.off-canvas { background-color: transparent; }
.is-open-right { -webkit-transform: initial; transform: initial; margin-left: -250px; }
.off-canvas-wrapper-inner { transition: margin 0.5s ease; }
.sticky.is-stuck { left:0px !important; transition:0.5s; }
.is-open-right .sticky.is-stuck { left:-250px !important; }