スクロールでdivとtableヘッダーを固定する

Question

私はドロップダウンリストを持っていますが、下にはテーブルがあります。 ngx-infinite-scrollingを使用しています。スクロールするときに、より多くのデータが追加されてスクロールダウンされるので、divの部分とテーブルのヘッダーを固定したままにしておきます。

これはjsfiddle JSFiddle

HTMLコードです：私はポジション入れてみました

.topTable{ 
height:70px; 
background:red; 
margin-top:-20px; 
margin-bottom:20px;  
display: flex; 
padding-left: 32px; 
border:1px solid rgba(0,0,0,.1) 
} 

.tableDiv{ 
margin-top:50px 
} 

：

<div class="topTable row "> 

    <div class="col-md-4 col-lg-3 col-sm-4 col-6"> 
    <form class="form-inline"> 
     <div class="form-group" style="width:100%;max-width:200px;"> 
     <div class="input-group" style="width:100%"> 
      <select class="form-control" > 
       <option >All</option> 
       <option >Option1</option> 
       <option >Option1</option> 
        <option >Option1</option> 
       </select> 

     </div> 
    </div> 


<div class="container-fluid"> 
    <div class="col-md-12"> 
    <div class="col-md-12 tableDiv" > 
    <div class="constrained" > 
    <table class="table table-striped col-md-12 table-condensed cf" > 
    <thead class="table-bordered cf"> 
    <tr> 
     <th>Column1</th> 
     <th>Column2</th> 
     <th>Column3</th> 
     <th>Column4</th> 
     <th>Column5</th> 
     <th>Column6</th> 

    </tr> 
    </thead> 
    <tbody > 
    <tr> 
     <td > asdf</td> 
     <td >asdfa</td> 
     <td >fsdf</td> 
     <td>sdfsfd</td> 
     <td>sdfs</td> 
     <td>fsdfsdf</td> 
    </tr> 
     <tr> 
     <td > asdf</td> 
     <td >asdfa</td> 
     <td >fsdf</td> 
     <td>sdfsfd</td> 
     <td>sdfs</td> 
     <td>fsdfsdf</td> 
    </tr> 
     <tr> 
     <td > asdf</td> 
     <td >asdfa</td> 
     <td >fsdf</td> 
     <td>sdfsfd</td> 
     <td>sdfs</td> 
     <td>fsdfsdf</td> 
    </tr> 
     <tr> 
     <td > asdf</td> 
     <td >asdfa</td> 
     <td >fsdf</td> 
     <td>sdfsfd</td> 
     <td>sdfs</td> 
     <td>fsdfsdf</td> 
    </tr> 
     <tr> 
     <td > asdf</td> 
     <td >asdfa</td> 
     <td >fsdf</td> 
     <td>sdfsfd</td> 
     <td>sdfs</td> 
     <td>fsdfsdf</td> 
    </tr> 
     <tr> 
     <td > asdf</td> 
     <td >asdfa</td> 
     <td >fsdf</td> 
     <td>sdfsfd</td> 
     <td>sdfs</td> 
     <td>fsdfsdf</td> 
    </tr> 

    </tbody> 
    </table> 
</div> 
    <div> 
    </div> 
</div> 
</div> 
</div> 

CSSテーブル、その後、スクロールの下向きのdivに静的に、だろうがそれの上に行く。 またテーブルの静的およびそのヘッダーを修正する方法？ 助けがありがたいです

Answer 1

コンテンツブロックからトップブロックを分離する必要があります。

最初のブロックを固定することができます。ブロックはコンテンツブロックよりも100％幅とz-インデックスを取得する必要があります（デフォルトは0 - > 1以上必要です）。

position:fixed; 
width:100%; 
z-index: 1; 

私はあなたのフィドルをフォークしていますhttp://jsfiddle.net/n958b7q3/1/ 変更がマークされています。

いくつかのヒント：

HTML

• あなたは本当に
• あなたのフォームに必要な場合にのみ、新規のdivのを作り、多くのdiv要素に着いには終了タグがありません</form>

CSS：

• あなたがborder:1px solid rgba(0,0,0,.1)