Bootstrap - 浮動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

下方添加CSS到ID #sticky

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

Answer 2

雖然調整輸出窗口 - 粘頭寬度是變化的。我想要製作主要內容的棒。我的意思是粘性div必須與主要div一起適合。