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

但是,页面的顶部也有一个引导词缀,当您向下滚动页面时会出现该词缀。

如果打开页面并等待(不执行滚动)直到画廊完全加载,则画廊将按照应有的方式放置。

但是,如果此后向下滚动以显示词缀,然后单击以查看下一张图像,则整个图库将向上移动,以使其实际上覆盖包含文章文本的上一个布局块。

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

谢谢。

最佳答案

当附加词缀出现时,附加的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;
    }
}

关于html - 高幻灯片页内画廊被自举词损坏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26796710/

10-11 13:14