Bootstrap Popover flickers during page scroll

Question

I am using Twitter Bootstrap to indicate the part of the article currently shown on screen. The popover messages are always shown, irrespective of the click being made. The problem I am facing is that the popover flickers during scroll. I want the popover to be stable and to show messages without flicker. How do I do it ?

Bootstrap Popover :

<a href="#" id="example" class="btn btn-primary" rel="popover" data-content="This is the body of Popover"  data-placement="left"

jQuery code :

$(function () {
    $('#example').popover();
});

$(window).scroll(function() {  
    var current = $('[name = "scroll"]');
    if($(window).scrollTop() > 0 ) {
        current.attr("data-content", "Introduction");
        current.popover("show");
    }
    if($(window).scrollTop() > 620 ) {
        current.attr("data-content", "Main Passage");
        current.popover("show");
    }
});

Here's the working demo : http://jsfiddle.net/abyz19ja/

Answer 1

It flickers because you are constantly calling the popover's show function on every scroll action. What you need to do is use a flag or a counter and only tell the popover to show when it's content has been updated.

something like this:

$(function () {
    $('#example').popover();
});
var counter = 0;
$(window).scroll(function() {
    var pos = $(window).scrollTop(); 
    var current = $('[name = "scroll"]');
    if(pos >= 0 && pos < 619) {
      if (current.attr("data-content") != "Introduction") {
        current.attr("data-content", "Introduction");
        current.popover("show");
        counter == 0;
      }
    } else {
      if (current.attr("data-content") != "Main Passage") {
        current.attr("data-content", "Main Passage");
        current.popover("show");
        counter == 0;
      }
    }

    if (counter === 0){
    current.popover("show");
    counter = counter+1;
    }

});

You also need to position the popover as fixed so that it stays in the same place as it is not recalculating on every scroll position change anymore.

.popover {
  position:fixed
}

Now if you can, try to make this more explicit by adding a parent container, eg:

#container .popover {
 position:fixed;
}

Otherwise it will apply to all the popovers on your page/site, depending on how you implement your css and whether you have any other popovers or not.