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

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

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

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

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

亚当，先谢谢你。

Answer 1

尝试margin API选项

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

请参阅JSFIDDLE