Highslide in-page gallery gets broken by bootstrap affix

Question

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.

Answer 1

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