Sticky nav bar is flickering when reaching bottom of page

Question

I recently go my nav bar to act as a sticky nav bar that adheres to the top of my page after I scroll down to a certain point, however, when I reach the bottom of my page the entire nav bar flickers, and even disappears sometimes. Think of it as an old TV that would flicker and you would end up hitting on the side to stop the flickering. How would I hit my nav bar to stop it from flickering. Here is my site so you can witness all the glory of the flicker.

Here is my HTML for the nav:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

And here is my JS:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>

An important note should be that this only began occurring after I changed the offset in my JS from offset: $('#nav').position() to offset: 675. You might say, well just change it back, but with the old offset, my sticky nav would jump prematurely to the top.

Thanks for any help of input you can provide me!

Answer 1

Answer from this Bootstrap 3 Fixed Top Navbar...

Just add the following to .navbar

.navbar
{
   -webkit-backface-visibility: hidden;
}

Answer 2

Just add this to your CSS class.

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }