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

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

Answer 1

在API页面中 ，centerOnScroll似乎是您想要的：

密钥：centerOnScroll
默认值：false描述：如果为true，则在滚动页面时FancyBox居中

Answer 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行，你会看到同样的事情。 也替换它。 这应该可以解决修复过程中出现的动画问题。

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

 #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; } 

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

Answer 3

对于本文档http://fancyapps.com/fancybox/#docs中提到的fancyBox 2.0及更高版本

autoCenter ：如果设置为true，则内容将始终以布尔值为中心; 默认值：！isTouch

例：

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