我正在使用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/
答案 0 :(得分: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的方式以及是否有其他弹出窗口。