Bootstrap Popover在頁面滾動期間閃爍

Question

我正在使用Twitter Bootstrap指示當前在屏幕上顯示的文章部分。 總是顯示彈出消息，而與單擊無關。 我面臨的問題是滾動過程中彈出窗口閃爍。 我希望彈出窗口穩定並顯示消息而不會閃爍。 我該怎么做 ？

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

之所以閃爍，是因為您在每次滾動操作時都不斷調用彈出框的show函數。 您需要做的是使用一個標志或一個計數器，並且僅告訴彈出框顯示其內容已更新的時間。

像這樣的東西：

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