ブートストラップ - フローティングdivの固定トップdivが機能しない

Question

#main divの上部にスティッキーヘッダーを残しておきたい。

ここは私のjs fiddle linkです。応答モードであっても。私は以下のコードを試しましたが、動作しません。

@import "bootstrap-sprockets"; 
 
@import "bootstrap"; 
 
@import "font-awesome"; 
 
@import "navbar"; 
 
body, 
 
html { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
body { 
 
    padding: 10px; 
 
} 
 

 
.row-offcanvas { 
 
    height: 100%; 
 
    padding: 5% 0px 5% 0px; 
 
} 
 

 
#sidebar { 
 
    width: inherit; 
 
    min-width: 220px; 
 
    max-width: 220px; 
 
    background-color: black; 
 
    float: left; 
 
    height: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#main { 
 
    height: 200px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    background-color: white; 
 
} 
 

 
#sticky { 
 
    background-color: green; 
 
} 
 

 

 
/* 
 
* off Canvas sidebar 
 
* -------------------------------------------------- 
 
*/ 
 

 
@media screen and (max-width: 768px) { 
 
    .row-offcanvas { 
 
    position: relative; 
 
    -webkit-transition: all 0.25s ease-out; 
 
    -moz-transition: all 0.25s ease-out; 
 
    transition: all 0.25s ease-out; 
 
    width: calc(100% + 230px); 
 
    margin-top: 35px; 
 
    } 
 
    .visible-xs { 
 
    padding-top: 10px; 
 
    } 
 
    .row-offcanvas-left { 
 
    left: -230px; 
 
    } 
 
    .row-offcanvas-left.active { 
 
    left: 0; 
 
    } 
 
    .sidebar-offcanvas { 
 
    position: absolute; 
 
    top: 0; 
 
    } 
 
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="row-offcanvas row-offcanvas-left"> 
 
    <div id="sidebar" class="sidebar-offcanvas"> 
 
    <div class="col-md-12"> 
 
     <h2> 
 
     Sidebar 
 
     </h2> 
 
    </div> 
 
    </div> 
 
    <div id="main"> 
 
    <div id="sticky"> 
 
     sticky header 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <p class="visible-xs"> 
 
     <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button> 
 
     </p> 
 
     <div class="row"> 
 
     <h2> 
 
      main content 
 
      <br/> main content 
 
      <br/> main content 
 
      <br/>main content 
 
      <br/>main content 
 
      <br/>main content 
 
      <br/>main content 
 
      <br/>main content 
 
      <br/> 
 
     </h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--/row-offcanvas -->

誰も私を助けてもらえますか？事前にあなたの助けを感謝します。出力ウィンドウのサイズを変更しながら

おかげ

Answer 1

は

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

Answer 2

#sticky IDにCSS下に追加 - スティッキーヘッダの幅が変化します。私はメインコンテンツでそのスティックを作りたいと思います。スティッキーなdivはメインdivと一緒に収まる必要があります。