jQuery FancyBox：滚动时弹出窗口相对于窗口的固定位置答案

【问题标题】：jQuery FancyBox : fixed position of popup with respect to window while scrollingjQuery FancyBox：滚动时弹出窗口相对于窗口的固定位置
【发布时间】：2011-01-18 07:06:37
【问题描述】：

滚动页面时如何固定fancybox弹出窗口在屏幕上的位置？
这个插件中是否有任何选项，或者我必须使用css 定义它？

【问题讨论】：

标签： jquery jquery-plugins position fancybox

【解决方案1】：

来自API page，centerOnScroll 似乎是你想要的：

键：centerOnScroll
默认值：假说明：当为 true 时，FancyBox 在滚动页面时居中

【讨论】：

【解决方案2】：

简单地使用 centerOnScroll API 选项的问题在于，当您向上和向下滚动页面时，您会注意到您的 fancybox 窗口必须“赶上”，因为它不断尝试动画以使其回到中心位置.这会导致看起来不太好的“生涩”运动。

如果您不介意编辑 Fancybox 源代码，您可以使用的解决方案是找到 fancybox_get_viewport 函数并进行更改。我正在使用 Fancybox 1.3.4。所以找到这个：

        _get_viewport = function() {
        return [
            $(window).width() - (currentOpts.margin * 2),
            $(window).height() - (currentOpts.margin * 2),
            $(document).scrollLeft() + currentOpts.margin,
            $(document).scrollTop() + currentOpts.margin
        ];
    },

并将其替换为：

        _get_viewport = function() {
        var isFixed = wrap.css('position') === 'fixed';
        return [
            $(window).width() - (currentOpts.margin * 2),
            $(window).height() - (currentOpts.margin * 2),
            (isFixed ? 0 : $(document).scrollLeft()) + currentOpts.margin,
            (isFixed ? 0 : $(document).scrollTop()) + currentOpts.margin                
        ];
    },

这解决了问题，现在当您向上和向下滚动页面时，它会完美地停留在浏览器的同一位置。唯一的问题是此更改会导致一些动画问题，有时会出现新的弹出窗口来自屏幕底部。要解决这个问题，需要进行更多更改。在第 378 行左右更改：

                start_pos = {
                top  : pos.top,
                left : pos.left,
                width : wrap.width(),
                height : wrap.height()
            };

到：

            final_pos = {
            top  : ((wrap.css('position') === 'fixed') ? pos.top - $(this).scrollTop() : pos.top),
            left : pos.left,
            width : wrap.width(),
            height : wrap.height()
        };

在第 978 行附近，您会看到相同的内容。那里也换。这应该可以解决随之而来的动画问题。

最后在你的 CSS for Fancybox 中找到：

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

并替换为：

#fancybox-wrap {
    position:fixed;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

我希望这可以帮助那些希望他们的弹出窗口完全固定在屏幕上的人，希望我有这个解决方案，但必须自己弄清楚:)

【讨论】：

【解决方案3】：

对于fancyBox 2.0 及更高版本，如本文档中所述 http://fancyapps.com/fancybox/#docs

autoCenter ：如果设置为 true，则内容将始终居中布尔值；默认值：!isTouch

例子：

$('.fc-event').fancybox({
    autoCenter: true,
    type: 'ajax',

【讨论】：