即使我写了data-offset-bottom，Bootstrap Affix仍然会修复导航栏

Question

对不起，但这段代码出了什么问题？ 正如您所看到的here，即使我写Bootstrap Affix，data-offset-bottom仍会留下痕迹。 我阅读了几页并复制并粘贴，但效果不佳。 你能帮帮我吗？

$(function(){
  $(window).scroll(function () {
    var ScrTop = $(document).scrollTop();
    $('#intervalValue').val(ScrTop);
  });
});

body {
   color: red;
  }
  .container-fluid {
    margin: 0;
    padding: 0;
  }
  .row {
    margin: 0;
    padding: 0;
  }
  .affix {
    top: 0;
    width: 100%;
  }
  /*.affix-bottom {
    position: absolute;
  }*/
  .affix + .container-fluid {
    padding-top: 70px;
  }
  div#interval {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="interval">current scroll value: <input type="text" size="10" value="0" id="intervalValue"></div>

  <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
  </div>

  <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" data-offset-bottom="50">  <!-- Affix start when scrolling quantity is 197 and end at 100 from bottom -->
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Basic Topnav</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>

  <div class="container-fluid" style="height:1000px">
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
  </div>