基金會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位置固定

回答

相關問題