Colorbox make the light box fixed when scrolling

Question

I working with jquery colorbox. When the page content is big and colorbox is opened. Then the color box scrolled along with the page content. I want the colorbox need to be fixed even the background content scrolls.

Please help me out to fix this issue.

Answer 1

perhaps all of these answers are from an earlier version of colorbox, but the "fixed" parameter is now available as of version 1.3.17:

$("a.item").colorbox({fixed:true});

no more mucking about in the CSS required! Thanks colorbox guys!

Answer 2

Puaka i am changing a little thing, which make it works awesome. It aligns center perfectly.

Change the colorbox.css

from

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

to

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

colorbox is perfectly aligned.

Answer 3

try this. change the colorbox.css the first css rule :

from

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

to

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

Answer 4

Hope this will also be helpful.

$(document).ready(function() {

    $('.div-container').colorbox( {

        initialWidth:'550px', 
        initialHeight:'350px', 
        onComplete: function() {
            // alert('window = ' + $(window).height());
            // alert('colorbox = ' + $('#colorbox').height());

            var window_height = $(window).height();
            var colorbox_height = $('#colorbox').height();
            var top_position = 0;

            if(window_height > colorbox_height) {
                top_position = (window_height - colorbox_height) / 2;
            }

            // alert(top_position);
            $('#colorbox').css({'top':top_position, 'position':'fixed'});
        }
    });
});