Kaydırılabilir bir kenar çubuğunda üstbilgi oluştur

Question

Başlığı olan bir yan çubuğa sahibim. Bazen içerik taşar, böylece tüm eleman üzerinde overflow-y: scroll kullanılır. Ancak şimdi (yakın eylemle) başlık, kaydırdığımda görünümden çıkar. İçerik kaydırıldığında üstbilginin sabit kalmasını istiyorum.

Bunu yalnızca CSS kullanarak yapmak için bir yol var mı?

*, *: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>

Pen

Answer 1

için, taşma özelliği vermek başlığı için yeterli yer bırakın. Bu yapmalı.

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

deneyin bu ekleme:

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

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

ne gittiğini mi için?

Başka bir seçenek de .side-panel-body üzerinde kaydırılabilir içeriği taşımak ve konteyner daha küçük bir height ayarlarsanız ayrıca, sadece bedenden

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