Question

我正在使用Twitter Bootstrap来指示当前在屏幕上显示的文章部分。无论点击是什么，始终显示弹出消息。我面临的问题是弹出窗口在滚动期间闪烁。我希望popover稳定并显示没有闪烁的消息。我该怎么做？

Bootstrap Popover：

<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

它闪烁，因为你经常在每个滚动动作上调用popover的show函数。你需要做的是使用一个标志或一个计数器，只告诉popover显示它的内容何时更新。

类似的东西：

$(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的方式以及是否有其他弹出窗口。

页面滚动期间Bootstrap Popover闪烁

1 个答案: