[英]Bootstrap Affix plugin navbar top delay
I am using the latest release of bootstrap 3. I am using the affix plugin to make a static navbar fixed. 我正在使用最新版的bootstrap3。我正在使用affix插件来修复静态导航栏。 It works however, there is a significantly long delay before the navbar updates and becomes fixed to the top. 它起作用,但是导航栏更新并固定在顶部之前会存在相当长的延迟。 It is repeatable on all browsers. 在所有浏览器上都是可重复的。
I figured it would be easiest to show the problem with a video, I also provided some code. 我认为用视频显示问题最容易,我还提供了一些代码。
<h1></h1>
The effect I want is a clean instant transition like 我想要的效果是一个干净的即时过渡
this "http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&" 这个“ http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&”
I should also point out that I am using jQuery to define my section heights and the affix offset, I initially thought this would be causing the delay however, now I think that is out of the question. 我还应该指出,我正在使用jQuery定义我的横断面高度和词缀偏移量,我最初以为这会引起延迟,但是现在我认为这是不可能的。
This feels like a performance issue to me. 对我来说,这就像性能问题。 I think jQuery is taking a little bit too long to figure out the height and apply the styling to the navbar. 我认为jQuery花费的时间太长,无法确定高度并将样式应用于导航栏。
I am hoping someone might have some insight into this matter. 我希望有人可能对此事有所了解。
So I figured out what the issue was. 所以我弄清楚了问题所在。
I wrote used jQuery to get the height of the header (the content above the navbar) in this case it was a video, and made it the affix offset. 在这种情况下,我使用jQuery来获取标题的高度(导航栏上方的内容),它是一个视频,并使其后缀偏移。 The way I fixed my jumping issue is just make the offset property a function that calculated the height of the header instead of a static variable. 我解决跳跃问题的方法只是使offset属性成为一个计算标头高度的函数,而不是一个静态变量。
Here is the updated JSFiddle
https://jsfiddle.net/DTcHh/23013/ https://jsfiddle.net/DTcHh/23013/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.