絶対配置されたdiv内に固定配置されたdivが必要

Question

私はSnap.jsプラグインを使用しています（スクロール側のドロワー/パネルを作成することができます）。

これは、3つの絶対配置されたdivを作成することによって機能します。その1つにメインコンテンツが含まれています。

divが絶対配置されたdivの内側にある場合、ウィンドウの上部にdivを配置する方法はありますか？

現時点では、私はちょうど固定divがブラウザの上部ではなく絶対配置されたdivの上部にピン止めされています。スクロールすると、divはメインコンテンツの上部に固定されますが、ウィンドウは固定されません。例えば

：私はスクロールオフセットを追跡し、手動でのパフォーマンスのために理想的ではない子のdivのトップの位置を調整するためにJavaScriptを使用している時点では

<div style="position:absolute;"> 

    <div style="position:fixed;top:0"> 
     <!-- some content which needs to be pinned to top of window --> 
    </div> 

</div> 

。

Answer 1

参照 - 、インターネットエクスプローラで任意のアイデアをスクロールしたとき、それはジッタ。

<div id="displayed-content" class="snap-content scrollable"> 
    <div><!-- regular content --></div> 
     <div><!-- fixed content --></div> 
    <div><!-- footer content --></div> 
</div> 

http://jsfiddle.net/bxRVT/

Answer 2

私はあなたがやろうとしているものについて少し推測していますが、あなたはこのような何かを探している可能性があります：

<div class="local-wrap"> 
    <div class="fixed"> 
     Some content which needs to be pinned to top of window 
    </div> 
    <div class="port"> 
     Regular content... 
    </div> 
</div> 

と、次のCSS適用されます。

.local-wrap { 
    position: relative; 
} 
.local-wrap .fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightgray; 
    width: 100%; 
    height: 5.00em; 
} 
.local-wrap .port { 
    position: relative; 
    top: 5.00em; 
    min-height: 10em; 
    height: 15em; 
    overflow: auto; 
    border: 1px solid gray; 
    border-width: 0 1px 1px 1px; 
} 

デモフィドルを： http://jsfiddle.net/audetwebdesign/pTJbW/

基本的に、ブロック要素に対して固定ブロックを取得するには、絶対配置を使用する必要があります。固定配置は、常にルート要素またはビューポートに対して行われるため、position: fixedは役に立ちません。

.local-wrapコンテナを定義し、2つの子ブロックを持つコンテナを定義します.1つは 、もう1つは.local-wrap、もう1つは通常のフローです。私はposition: relativeを使ってそれを.fixedの下に置いていましたが、一番上のマージンも働いていました。

ローカルウィンドウ/ポート内のコンテンツをスクロールするための高さをいくつか修正しましたが、デザインやアプリケーションによって変更することができます。考慮すべきその他の考慮事項があるかもしれないので、

免責

私はsnap.jsに精通していないです。あなたはdiv.transformedそれを呼んで、要素に変換を適用する場合にはCSS3の

コメントは、CSS3仕様によると

要素を変形して固定し、div.transformed新しいスタッキングコンテキストを作成し、含むとして機能それが含まれている任意の固定位置の子要素をブロックします。そのため、シナリオでは、固定位置コンテキストがウィンドウの上部にとどまっていません。参考のため

は、私は私のjavascriptの回避策を示すバイオリンを作ったMozilla Developer Network -> CSS Reference -> Transform