財団6、スティッキーメニューと現在の基本的なHTMLでキャンバスオフ土台6を使用して

Question

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

ここに問題があるし、メニューoffcanvasをクリックし、彼らがトップにもたらします（同じ物事はファンデーションの文書として）、スクロールメニューが再びスクロールすると、本当に面白いものになります。

また、オフキャンバスのメニューは、ユーザーがスクロールする際に横にならず、これはファンデーションのドキュメントも同様です。

私が気付いたのは、CSSを変換する大きなラッパーにis-openクラスがあります。x これは、絶対からスティッキーを壊すものです。

私はそのクラスを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; } 

my cssは、古いマージンネガを使用するように再構成します。

これらの変更により、以前の動作と似ています。