Bootstrap Affix plugin navbar top delay

Question

I am using the latest release of bootstrap 3. I am using the affix plugin to make a static navbar fixed. 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.

see video

see JSFiddle

<h1></h1>

The effect I want is a clean instant transition like

this "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.

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.

I am hoping someone might have some insight into this matter.

Answer 1

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. 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.

Here is the updated JSFiddle

https://jsfiddle.net/DTcHh/23013/