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

Question

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

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

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

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

亚当,先谢谢你.

Answer 1

尝试marginAPI选项

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

请参阅JSFIDDLE