Foundation 6，粘性菜单和 offcanvas 位置固定

Question

目前正在使用 foundation 6 Off canvas 和 basic html here

<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>

这里的问题是，当用户滚动然后单击关闭canvas 菜单时，他们会被带到顶部（与基金会的文档相同），当他们再次向下滚动时，粘性菜单的行为非常有趣。

关闭canvas 菜单也不会在用户滚动时粘在一边，这也是 foundation 上的文档所做的。

我注意到切换时有一个 is-open class 在做 css translate x 的大包装上这就是从绝对位置打破粘性的原因。

当我将 class 切换为 margin-left: -250px;一切正常。

我在网上查找，但找不到任何相关内容，想知道这是否只是我的 html 结构不正确，或者这真的是一个错误。

Answer 1

<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right" data-force-top="false">

这可以防止在按钮操作时滚动到顶部。

.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; }

我的 css 重组以使用良好的旧保证金负值。

这些更改使它看起来就像以前一样。

Foundation 6，粘性菜单和 offcanvas 位置固定

Foundation 6, Sticky menu and offcanvas Position Fixing

html

javascript

css

wordpress

zurb-foundation