Mache Header in einer scrollbaren Sidebar Sticky

Question

Ich habe eine Seitenleiste mit einer Kopfzeile. Manchmal ist der Inhalt überlaufen, so dass ich ein overflow-y: scroll für das gesamte Element verwendet habe. Aber jetzt bewegt sich die Kopfzeile (mit der Schließen-Aktion) beim Scrollen aus der Ansicht heraus. Ich möchte, dass der Header fixiert bleibt, wenn der Inhalt gescrollt wird.

Gibt es eine Möglichkeit, dies nur mit CSS zu tun?

Pen

*, *:after, *:before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 
html { 
 
    font-size: 10px; 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 
body { 
 
    color: #999; 
 
    font-size: 14px; 
 
    line-height: 20px; 
 
} 
 
#side-panel.presented { 
 
    right: 0; 
 
} 
 
#side-panel { 
 
    border-left: none; 
 
    bottom: 0; 
 
    position: fixed; 
 
    right: -400px; 
 
    top: 60px; 
 
    width: 400px; 
 
    overflow-y: scroll; 
 
    -moz-box-shadow: -2px 0 5px #dfdfdf; 
 
    -webkit-box-shadow: -2px 0 5px #dfdfdf; 
 
    box-shadow: -2px 0 5px #dfdfdf; 
 
}

<div id="side-panel" class="ember-view presented"> 
 
    <div class="side-panel-header"> 
 
    <h2>My header</h2> 
 
    </div> 
 
    <div class="side-panel-body"> 
 
    <div class="timeline"> 
 
     <ol> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">last</div></li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Wenn Sie den rollbaren Inhalt .side-panel-body bewegen und eine height eingestellt, der kleiner ist als der Behälter ist, auch lassen Sie genügend Platz für die Überschrift. Das sollte es tun.

jsFiddle

*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 
#side-panel { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 1px solid; 
 
} 
 
.side-panel-body { 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: auto; 
 
}

<div id="side-panel" class="ember-view presented"> 
 
    <div class="side-panel-header"> 
 
    <h2>My header</h2> 
 
    </div> 
 
    <div class="side-panel-body"> 
 
    <div class="timeline"> 
 
     <ol> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">thing</div></li> 
 
     <li><div class="type" data-type="milestone">last</div></li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Versuchen Hinzufügen dieses:

.side-panel-header{ 
 
    position: fixed; 
 
    background-color: white; 
 
    height: 50px; 
 
} 
 

 
.side-panel-body{ 
 
    padding-top: 35px; 
 
}

Ist das, was Sie gingen zum?

Eine weitere Option ist, dass Sie den Überlauf Eigenschaft geben, nur um den Körper

.side-panel-body{ 
 
    overflow-y: scroll; 
 
    height: 100%; 
 
}