Bootstrap navigation affix bug - menu becomes jittery, jumpy on long pages

Question

I'm building a website using bootstrap affix to manage the main menu. It seems to work perfectly on fairly short pages but I find that as page length increases the menu starts to get jumpy, jittery, as you scroll so I created 3 sample pages to illustrate the problem. Other than some extra content to promote additional scrolling the implementation of affix is identical.

Typically when I scroll I use the navigator scrollbar - the behavior appears more pronounced using the scrollbar vs keyboard up/down arrows and perhaps more so on Linux Firefox vs Chrome.

The affix CSS settings:

.affix {
  top: 0;
  width: 100%;
  z-index: 9999 !important;
}

.affix + .affix-content-container
{
  position: relative;
  top: 50px;
}

.navbar {
  margin-bottom: 0px;
}

I use the class, affix-content-container, on the div to contain all the body content following the bootstrap nav. Here are the links to the 3 varying length demo pages:

affix short page

affix medium page

affix long page

I've looked at some other websites which use something like affix, much longer pages, and they seem to behave more smoothly. Any suggestion how to smooth this out?

Here is a link to a video from Firefox. With each page I first use the mouse and scrollbar, then just the arrow keys. The green horizontal line is there for perspective, helps illustrate the problem.

Affix Video Demo

---

Workaround Solution Update: 2018-01-23

I added CSS transitions to .affix, in-out, etc, but they have no effect. It is still jumpy. So I thought back to the goal which is a navbar that scrolls to the top and smoothly fixes to the top of the page. I'm not much good with javascript, but I found some code and modified it:

<script type="text/javascript">
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 120) {
      $('nav').addClass('fix-navbar-position');
    } else {
     $('nav').removeClass('fix-navbar-position');
    }
  });
</script>

I set the height of the header to 120, the scroll then fix height:

header { height: 120px; }

I found that if I set it up as: that I was seeing some odd margins or extra vertical padding, so I separated it so that nav would be an outer container only - and this worked:

<nav>
  <div class="navbar navbar-default navbar-inverse">

The problem seemed to have something to do with the .navbar styling. To see the workaround solution visit: javascript-scroll-fix