Highslide页内画廊被bootstrap affix打破 [英] Highslide in-page gallery gets broken by bootstrap affix

问题描述

我的网页中有一个highslide图库 http： //civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html

但是，该页面还包含一个

如果您打开网页并等待，请在页面顶部显示

（不执行滚动），直到画廊完全加载，则画廊会以其应该的方式放置。

但是，如果 ，您可以向下滚动以显示附加信息，点击以查看下一张图片，整个它实际上覆盖了包含文章文本的以前的布局块。

看起来像在引导附加外观时，某种画廊的刷新应该被触发，重新计算图库位置。

解决方案

如果粘贴

修复：
将一个新的div包含在div中。根据附加的div（菜单）的断点，给这个dix两个不同的 height 或隐藏它 - 这似乎是1199px和979px。

HTML：

 < div class =affix-wrapper> 
< div data-spy =affixdata-offset-top =250class =your classes here> 
<！ - 内容的div  - > 
< / div> 
< / div> 
  

CSS：

  .affix-wrapper {
 height：70px; 
} 
 @media（max-width：1199px）{
 .affix-wrapper {
 height：139px; 
} 
} 
 @media（max-width：979px）{
 .affix-wrapper {
 display：none; 
} 
} 
  

I've got a highslide gallery in my page http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html

However, the page also contains a bootstrap affix at its top, which appears when you scroll down the page a bit.

If you open the page and wait (without performing scrolling) until the gallery fully loads, the gallery is placed just the way it should.

However, if after that you scroll down so that the affix gets shown, and click to view the next image, the whole gallery moves up so that it actually overlays the previous layout block containing the article text.

It seems like upon the bootstrap affix appearance some kind of a gallery 'refresh' should be fired so that highslide recalculates the gallery position. How do I achieve that?

Thanks.

解决方案

When affix kicks in, the affixed div is removed from the normal flow of the page which causes the parent div div to collapse.

Fix: Wrap the affixed div in a new div. Give this dix two different height, or hide it, based on the break point of the affixed div (the menu) - which seems to be 1199px and 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;
    }
}

这篇关于Highslide页内画廊被bootstrap affix打破的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！