高幻灯片页内画廊被自举词损坏

Question

我的页面上有一个高滑画廊， 网址为http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html

但是，页面的顶部还包含一个引导词缀 ，当您向下滚动页面时会出现该词缀 。

如果您打开页面并等待 （不执行滚动）直到画廊完全加载，则画廊将以应有的方式放置。

但是，如果在那之后您向下滚动以便显示词缀，然后单击以查看下一张图片 ，则整个图库将向上移动，从而使其实际上覆盖包含文章文本的前一个版式块。

似乎在自举词缀外观上应触发某种类型的“刷新”画廊，以便高幻灯片重新计算画廊的位置。 我该如何实现？

谢谢。

Answer 1

当附加词缀插入时，附加的div将从页面的常规流程中移除，这会导致父div div崩溃。

修复：将附加的div包装到新的div中。 根据附加的div（菜单）的断点，为该dix设置两个不同的height ，或将其隐藏-似乎分别为1199px和979px。

HTML：

<div class="affix-wrapper">
    <div data-spy="affix" data-offset-top="250" class="your classes here">
        <!-- content of the div -->
    </div>
</div>

CSS：

.affix-wrapper {
    height: 70px;
}
@media (max-width: 1199px){
    .affix-wrapper {
        height: 139px;
    }
}
@media (max-width: 979px){
    .affix-wrapper {
        display: none;
    }
}