基金会6，粘菜单和offcanvas位置固定

目前使用的基础上6折画布这里基金会6，粘菜单和offcanvas位置固定

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

这里的问题基本HTML是当用户滚动，然后点击offcanvas菜单他们获得在最前面（同作为基金会的文档），当他们再次向下滚动粘滞菜单真的很有趣。

另外，offcanvas菜单不会随着用户滚动而粘在一边，这也是基础文档所做的。

我注意到当切换的时候，在大包装上有一个is-open类，它执行一个css translate x 这是从绝对位置打破粘滞的东西。

当我将该类切换到margin-left：-250px;一切再次运作。

我在网上看，但无法找到任何相关的东西，并想知道如果它只是我的html结构incorect或是真的是一个错误。

来源

2016-04-22 vico

<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重构使用良好的旧边界负面。

这些变化使它看起来就像之前的行为。

来源

2016-04-22 15:54:36 vico

基金会6，粘菜单和offcanvas位置固定

回答

相关问题