Highslide in-page gallery gets broken by bootstrap affix

问题

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.

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

来源：https://stackoverflow.com/questions/26796710/highslide-in-page-gallery-gets-broken-by-bootstrap-affix