頁面滾動期間Bootstrap彈出窗口閃爍

我正在使用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/

來源

2017-04-26 build_code

它閃爍，因爲你不斷地在調用酥料餅的播放功能每一次滾動操作。你需要做的是使用一個標誌或一個計數器，只告訴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; 
}

否則將適用於所有的popovers您的網頁/網站，這取決於如何你實現你的CSS，是否有任何其他的彈出或不。

來源

2017-04-26 23:58:47 partypete25

這工作正常。但是我遇到了pop-of-z-index的問題。我做得比標題還要小。但是，當頁面滾動時，該消息仍置於標題之上。我希望他們去下面。 –

你試過z-index：-1;在.popover上？您也可能需要在彈出窗口上使用「容器」選項。 $（'＃example'）。popover（{container：'.title-parent-element'}）; – partypete25

頁面滾動期間Bootstrap彈出窗口閃爍

回答

相關問題