由于固定导航，增加顶部和底部边距FancyBox v2

Question

我目前正在开发一个网站，以后会有回应。该网站主要由图像组成，而这些图像在点击时又会加载到FancyBox中。 FancyBox的v2现在具有响应性，因此在屏幕尺寸变化时重新调整图像等大小。作为我设计的一部分，我有两个固定的横幅出现在页面的顶部和底部，见下图：

默认情况下，FancyBox周围有一个边距，因此它的样式很好。然而，随着我添加到横幅的固定定位，我需要增加顶部和底部边距。我已经查看了JS源码，但我不能在我的生活中找到我应该添加额外余量的地方。在过渡等方面有各种各样的边缘（我认为这是我感到困惑的地方）。

理论上我只需要在边距上添加“x”像素，其中x是横幅的高度。另外，我不确定如何在响应式设计中复制它，因为横幅在移动设备上可能稍微浅一些。添加边距意味着图像和横幅之间存在微小差距，当前图像位于横幅后面。请参阅下图，了解我希望它的样子：

我很感激以前做过这些事情的想法/例子。

先谢谢，亚当。

Answer 1

尝试margin API选项

$(".fancybox").fancybox({
    margin: [120, 60, 20, 60] // top, right, bottom, left
});

参见 JSFIDDLE