Colorbox движение при прокрутке вверх и вниз

Question

В моей ColorBox коде, это код СМЧА по умолчанию:

#colorbox, #cboxOverlay, #cboxWrapper{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    overflow: hidden; 
} 

В этом случае ColorBox отображается в центре страницы, но не перемещается при прокрутке вверх и вниз. Однако, когда я изменить код для этого:

#colorbox, #cboxOverlay, #cboxWrapper{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    overflow: hidden; 
} 

в ColorBox перемещается при прокрутке вверх и вниз, но не отображается в центре страницы. Как я могу объединить эти эффекты?

Answer 1

Установите ширину, высоту и смещение ColorBox используя что-то вроде:

#colorbox, #cboxOverlay, #cboxWrapper{ 
    position:fixed; 
    top:50%; 
    left:50%; 
    z-index:9999; 
    overflow:hidden; 
    width: 500px; //set the width 
    height: 500px; // set the height 
    margin-left: -250px; // negative offset to center the element 
    margin-top: -250px // negative offset to center the element 
} 

Здесь вы устанавливаете позицию из top и left быть 50%, вы устанавливаете width и height быть 500px, а затем смещение элемента на половину его ширины и высоты (с позиции начинается с верхнего левого угла), используя отрицательный запас

Fiddle