页面库中的高幻灯片被引导程序词缀破坏

Question

我的页面中有一个高幻灯片库http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html

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

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

但是，如果之后向下滚动以显示词缀，并且单击以查看下一个图像，则整个库将向上移动以便它实际上覆盖包含文章文本的上一个布局块。

在引导词缀出现时，似乎应该启动某种库"刷新"，以便高滑动重新计算库位置。我该如何做到这一点？

谢谢。

Answer 1

当粘贴开始时，粘贴的div将从页面的正常流中删除，这将导致父divdiv折叠。

修复：将附加的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;
    }
}