Javascript 引导粘贴在导航栏上，属性始终处于启用状态（类始终处于活动状态）

我正在尝试实现Bootstrap的附加导航栏，如

这是我所拥有的。似乎“affix”类总是在navbar元素上被激活。也就是说，当我这样做的时候

.affix {
   top: 0;
}

当我想要它做的是在名称和标题下时，导航栏会自动转到页面加载的顶部。你知道为什么会这样吗

编辑：修复了类似这样的示例链接

我刚刚移动了标题和子文本，并在其中添加了一个类

<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset top="197">      
<div class="navbrand">
  <h1> John Smith</h1></div>
  <h4> Developer and Engineer </h4>

约翰·史密斯
开发商和工程师

如果您希望在scroll上删除标题，我建议使用JQuery。我的意思与本例中的行为更为相似：请注意导航栏是如何位于内容下方的，但当它滚动过页面时，会粘在页面顶部。基本上，我希望导航栏位于名称和标题下，然后在滚动过去时保持停止。