高幻燈片頁內畫廊被自舉詞損壞

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;
    }
}