Geek asks and answers

Floating Images Spoiled Bootstrap Scrollspy

I set the page using bootstrap. ( http://ethnoma.org/about.html ) I have a sidebar anchor that is attached (which works great). I also use bootstrap scrollspy in this navigation, and all links in the navigation are on the same page (using ancors). Everything worked fine (even with the addition of a smooth scroll plugin). I just had to call this script to get Scrollspy to update after all the content has been added to the page (which I posted in <head>).

<script type="text/javascript">
// ScrollSpy
$(function () {
    $('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy('refresh')
    });
});
</script>

Then my client asked me to add images to the page. I did this using bootstrap and css markup classes, such as:

<a class="pull-right pad5" href="#">
    <img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>

float ( ) img .

, , . Scrollspy - . scrollspy , .

, Scrollspy ID- ancors. , . http://ethnoma.org/about.html

+5
2

, , , - bind.

-, scrollspy . , , , 0. , , , , . scrollspy , , .

scrollspy , , . , , .

- onLoad , scrollspy . :

<script type="text/javascript">
    function refreshScrollspy() {
        $('[data-spy="scroll"]').each(function() {
            $(this).scrollspy('refresh');
        });
    }
    $(function() {
        refreshScrollspy();
    });
</script>

<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>

jsfiddle. , . . . .

+2

Scrollspy Bootstrap, , script , Scrollspy .

, , , . , , , , , , - CSS, Scrollspy .

+1

More articles:


All Articles