页面滚动期间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弹出窗口闪烁

回答

相关问题