スクロール可能なサイドバーのヘッダーをスティッキーにする

Question

ヘッダー付きのサイドバーがあります。コンテンツがオーバーフローすることがあるので、要素全体にを使用しました。しかし、今私がスクロールすると、ヘッダー（クローズアクションで）ビューから移動します。コンテンツがスクロールするときにヘッダーを固定しておきたいです。

CSSのみを使用してこれを行う方法はありますか？

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

に、overflowプロパティを与えています見出しのために十分な余裕を残す。それはそれを行う必要があります。

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

この追加してみてください：

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

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

は、あなたが行っていたものをということです ために？

別のオプションあなたが.side-panel-bodyにスクロール可能なコンテンツを移動しても、コンテナよりも小さいheightを設定する場合は、本体だけ

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