Scrool獲得固定元素？

Question

這是我issuse，我有這樣一句：

CSS

.contentbox img { 
    max-width:100% !important; 
    height:auto; 
    display:block; 
    padding-top:100px; 
} 

.viewer-v3.lightbox { 
    padding-top:2%; 
    overflow: auto; 
    display: block; 
    position: fixed; 
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    text-align: center; 
    top: 0; 
    left: 0; 
    background: black; 
    background: rgba(0,0,0,0.8); 
} 


.contentbox { 
    height: 100%; 
    overflow: auto; 
    width:100%; 
    float:left; 
} 


.borderLightbox 
{ 
    border:#cccccc; 
    border-width:2%; 
    border-top-style:none; 
    border-right-style:solid; 
    border-bottom-style :solid; 
    border-left-style:solid; 
    position:relative; 
    /* 
    Here edit widht of lightBox 
    */ 
    width: 40%; 
    /* 
    #end 
    */ 
    height: 93%; 
    background-color:#e5e5e5; 
    margin-left:auto; 
    margin-right:auto; 
    overflow: visible; 
} 

.headerLightbox 
{ 
    position:fixed; 
    background-color:#e5e5e5; 
    border:#cccccc; 
    border-width:1%; 
    width: inherit; 
    float:left; 
    border-top-style:solid; 
    border-right-style:none; 
    border-bottom-style :none; 
    border-left-style:none; 
} 

.actionsLightbox 
{ 
    background-color:#ffffff; 
    width:96%; 
    float:left; 
    padding-top:5px;; 
    padding-bottom:5px; 
    padding-left:2%; 
    padding-right:2%; 
} 
.titleLightbox 
{ 
    color:#27aae4; 
    width:96%; 
    float:left; 
    padding-top:5px; 
    padding-bottom:5px; 
    padding-left:2%; 
    padding-right:2%; 

} 
.titleLinkLightbox 
{ 
    float:left; 
} 
.filetypeLightbox 
{ 
    float:left; 
    width:100%; 
    text-align:left; 
    color:#a5a5a5; 
} 
.closeLightbox 
{ 
    float:right; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 318px 0; 
    background-size: cover; 
    height:24px; 
    width:24px; 
} 
.printLightbox 
{ 
    float:left; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 0px 0; 
    background-size: cover; 
    height:24px; 
    width:24px; 
} 
.zoomLightbox 
{ 
    float:right; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 61px 0; 
    background-size: cover; 
    height:24px; 
    width:26px; 
} 
.actionsPageLightbox 
{ 
    float:left; 
    margin-left:auto; 
    margin-right:auto; 
    width:50%; 
    border:#cccccc; 
    border-width:1px; 
    border-top-style:none; 
    border-right-style:solid; 
    border-bottom-style :none; 
    border-left-style:solid; 
    margin-left:10%; 
    padding-left:2%; 
    pading-right 

} 
.prevLightbox 
{ 
    float:left; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 245px 0; 
    background-size: cover; 
    height:24px; 
    width:24px; 
} 
.nextLightbox 
{ 
    float:left; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 198px 0; 
    background-size: cover; 
    height:24px; 
    width:24px; 


} 
.minusLightbox 
{ 

    float:left; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 160px 0; 
    background-size: cover; 
    height:24px; 
    width:24px; 
} 
.plusLightbox 
{ 
    float:left; 
    text-decoration:none; 
    display:block; 
    background-image:url(lightboxIcons.png); 
    background-position: 112px 0; 
    background-size: cover; 
    height:24px; 
    width:24px; 


} 
.inputLightbox 
{ 
    float:left; 
    width:5%; 
} 
.currentPageLightbox 
{ 
    float:left; 
} 

，這裏是HTML

<div class="viewer-v3 lightbox"> 
    <div class="borderLightbox"> 


     <div class="headerLightbox"> 

     <div class="titleLightbox"> 
     <span class="titleLinkLightbox"> 
      FileDeleteImeg.jpg 
      </span> 
      <a class="closeLightbox" href="#"></a> 
     <span class="filetypeLightbox">Adobe Views file</span> 
     </div> 

     <div class="actionsLightbox"> 
      <a class="printLightbox" href="#"></a> 
       <div class="actionsPageLightbox"> 
        <a class="prevLightbox" href="#"></a> 
        <input type="text" name="LastName" class="inputLightbox"> 
        <span class="currentPageLightbox">/ 12</span> 
        <a class="nextLightbox" href="#"></a> 
        <a class="minusLightbox" href="#"></a> 
        <a class="plusLightbox" href="#"></a> 
       </div> 
      <a class="zoomLightbox" href="#"></a> 
     </div> 

     </div> 

     <div class="contentbox"> 
      <img src="http://fc08.deviantart.net/fs51/f/2009/281/e/2/Paint_Tool_SAI_tutorial_IS_BIG_by_Left_Right_Wrong.png"> 
     </div> 

</div> 
</div> 

這是我的問題，我有滾動的圖像和工作好吧，但scrool得到固定的標題元素下，甚至prevenet，我已經添加了圖片的邊界在頭下，我的問題是如何把滾動基於固定的標題下，有沒有人有解決方案？

這裏是一個小提琴，abaout我的問題，你看scrool酒吧是在固定頭下，任何解決方案？

http://jsfiddle.net/Fmh5p/

Answer 1

您可以在圖像上改變padding-top將值border-top上contentbox，使其與滾動使用本作品：

.contentbox { 
    border-top:100px solid transparent; 
    box-sizing:border-box; 
} 

入住這Demo Fiddle

_{說明：屬性框的大小有助於保持容器的真實100％高度，請注意，此屬性僅適用於IE> = 8}