Bootstrap - Floating div's fixed Top div funktioniert nicht

Question

Ich möchte die sticky Header bleiben an der Spitze meiner #main Div bleiben.

Hier ist meine js fiddle link. Auch im Reaktionsmodus. Ich habe versucht, unter Code, aber es funktioniert nicht.

@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 -->

Kann mir jemand helfen? Schätzen Sie Ihre Hilfe im Voraus. Dank

Answer 1

unter CSS id #sticky

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

Answer 2

Während Ändern der Größe Ausgabefenster - sticky Kopfbreite variiert wird. Ich will diesen Stock mit Hauptinhalt machen. Ich meine, dass das klebrige Div zusammen mit dem Hauptdiv passen muss.