javascript - Bootstrap Popover 在页面滚动期间闪烁

Question

我正在使用 Twitter Bootstrap 来指示屏幕上当前显示的文章部分。无论是否进行单击，都会显示弹出消息。我面临的问题是滚动期间弹出窗口闪烁。我希望弹出窗口稳定并显示消息而不闪烁。我该怎么做？

Bootstrap 弹出窗口:

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

jQuery 代码:

$(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");
    }
});

这是工作演示:http://jsfiddle.net/abyz19ja/

Answer 1

它会闪烁，因为您在每个滚动操作上不断调用弹出窗口的显示函数。您需要做的是使用标志或计数器，并仅告诉弹出窗口在其内容已更新时显示。

像这样:

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

});

您还需要将弹出框定位为固定位置，以便它保持在同一位置，因为它不再在每次滚动位置更改时重新计算。

.popover {
  position:fixed
}

现在，如果可以的话，尝试通过添加父容器来使其更加明确，例如:

#container .popover {
 position:fixed;
}

否则它将应用于您页面/网站上的所有弹出窗口，具体取决于您如何实现 CSS 以及您是否有任何其他弹出窗口。