JS & jQuery Scroller için CSS'yi kullanarak yan çubuk ve üstbilgi nasıl düzeltilir

Question

Bu yerleşime sahibim ve sol kenar çubuğu, sağ kenar çubuğu ve üstbilgiyi düzeltmek istiyorum.

Bu

benim css geçerli:

#container { 
     padding-left: 200px;  /* LC fullwidth */ 
     padding-right: 190px;  /* RC fullwidth + CC padding */ 
    } 

    #container .column { 
     position: relative; 
     float: left; 
    } 

    #center { 
     padding: 10px 20px;  /* CC padding */ 
     width: 100%; 
     overflow-x:hidden; 
    } 

    #left { 
     width: 180px;    /* LC width */ 
     padding: 0 10px;   /* LC padding */ 
     right: 240px;    /* LC fullwidth + CC padding */ 
     margin-left: -100%; 
    } 

    #right { 
     width: 130px;    /* RC width */ 
     padding: 0 10px;   /* RC padding */ 
     margin-right: -100%; 
    } 

    #footer { 
     clear: both; 
    } 

& kod Bu adımdan sonra here

, ben sağ taraf bar nanScrollerJS eklemek istiyorum.

Ben tabii ki, IE için bunu çalışması için bazı hacks gerekir, Sen position:fixed kullanabilirsiniz CSS

Answer 1

Yapmaya çalıştığınız bu muydu?

Fiddle

Ben senin kod neredeyse tüm silinip yeni kodla değiştirdik.

#

position: fixed; 
top: 0; 
left: 0; 
width: 100%; 

#

width: 180px; /* LC width */ 
padding: 0 10px; /* LC padding */ 
float: left; 

# sağ

sol

margin-top: 32px; /* Header height */ 
padding: 10px 20px; /* CC padding */ 
box-sizing: border-box; 
border-left: 200px solid black; /* LC width including padding */ 
border-right: 150px solid black; /* RC width including padding */ 

# merkezi sabit

# altbilgi

position: relative; 
z-index: 1; 

Answer 2

aşina değilim ama.

Answer 3

Her zaman merkezinizi mutlak bir yükseklikte ve sonra taşma-y ile düzeltebilirsiniz. Bunu bu durumda ancak, http://jsfiddle.net/nr2NZ/27/

Teknik nanScrollerJS üzerinde örnek dışarıdan sabit div kullanır: Burada ne demek istediğimi bir örnek:

#center { 
     padding: 10px 20px;  /* CC padding */ 
     width: 100%; 
     height: 240px;    
     overflow-y:scroll;   
     overflow-x:hidden; 
    } 

ve burada (sizinki göre) çalışan bir örnektir çünkü eğer dış kutular göreceli konumdaysa, yani teorik olarak bir sorunu olmamalıdır.