Jquery Colorbox在滚动时使灯箱固定

我正在使用jquery colorbox。当页面内容较大且颜色框打开时。然后，颜色框与页面内容一起滚动。我希望颜色框需要被修复，即使是背景内容滚动

---

请帮助我解决此问题。

试试这个。将colorbox.css更改为第一个css规则：

从

到

---

Puaka我正在改变一件小事，这让它工作得很棒。它完全对准中心

更改colorbox.css

从

到

---

颜色框完全对齐。

只有当我一直滚动到顶部时，puaka方法才有效。 否则，框会显示得更低

我想出了另一种方法

$("#btn").colorbox({width:"90%", height:"90%", iframe:true, scrolling:false, onOpen:function() { $("body").css("overflow", "hidden"); }, onClosed:function() { $("body").css("overflow", "auto"); }});

打开并删除主体的滚动条

---

一旦关闭，请更换滚动条

这一条对我来说效果更好：

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

---

基于bradaric的想法，你可能需要改变

        posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(),
        posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

到

---

在位置函数中。（对我有用）

希望这也会有帮助

$(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'});
        }
    });
});

---

上面的css修复对于Mozilla和Chrome来说效果非常好，但是在IE中，如果事件发生在页面之间，它会带来一些填充问题。你可以通过使用钩子扩展函数，并在打开颜色框时隐藏溢出。例如：

$(document).ready(function(){

            $(document).bind('cbox_open', function(){
        $('body').css({overflow:'hidden'})
});
    });

上面的代码添加了样式溢出：隐藏到正文中，如果您关闭颜色框，您可能会发现页面上没有滚动条，因此您应该在$（document）.ready（function（）中添加此行

---

我认为上述方法不适合滚动时固定的Colorbox。以下方法，我已经在所有浏览器（IE7及更大版本）上测试过：

---

此方法适用于blendent

也许所有这些答案都来自于colorbox的早期版本，但“fixed”参数现在从1.3.17版开始可用：

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

---

不再需要在CSS中乱动了！谢谢colorbox的家伙们！

在这种情况下，包装器的宽度和高度不会分别位于中间和中间。这是最好的解决方法，在Chrome through中使用时，onClose会创建一个新的滚动条。on Closed的属性应该是“可见”，而不是“自动”；此代码仅在元素打开尚未导致用户滚动的情况下有效如果您将其修复-如果您的图像非常高且不想缩放，则无法向下滚动查看整个图像down@Picardfixed最好与maxHeight和maxWidth结合使用。将它们设置为90%或类似值，它将缩小im对于用户的屏幕来说，年龄太大。

        posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(),
        posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

        posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2,
        posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2;

posTop = Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight,0)/2,
posLeft = Math.max($window.width()  - settings.w - loadedWidth - interfaceWidth,0)/2;

$(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'});
        }
    });
});

$(document).ready(function(){

            $(document).bind('cbox_open', function(){
        $('body').css({overflow:'hidden'})
});
    });

$(document).bind('cbox_closed', function(){
        $('body').css({overflow:'visible'})
});

#colorbox, #cboxOverlay {
  position:absolute; top:0; left:0; z-index:9999;  
  }
#cboxWrapper {                       
  position:fixed; top:50%; left:50%; 
  margin:-25% 0 0 -25%; /*margin default */
  z-index:9999;
  }                                                 

/* not overflow hidden share, Opera truncates everything else */

              $("a.cBox").colorbox({
                 width:"500",
                 height:"400",
                 iframe:true,
                 onOpen: function() {
                 $('#cboxWrapper').css('margin','-200px 0 0 -250px');  
                 // margin adjusted - half the width and height minus margin top/left
                 }
              });

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