Affix Bootstrap 落在子导航的顶部而不是上面，Bootstrap答案

【问题标题】：Affix Bootstrap falling onTop of Sub Navigation instead of above, BootstrapAffix Bootstrap 落在子导航的顶部而不是上面，Bootstrap
【发布时间】：2016-02-23 00:50:02
【问题描述】：

出于保密原因，我目前无法共享该网页的链接，但我会尽可能使用所需的代码描述我的问题。

我正在从 Bootstrap 3.3.6 运行附加 javscript，并在锚点上构建页面，以便菜单保持附加在子导航上方。

我的元素顺序是：

[MAIN]
[HEADER]
[CAROUSEL]
[NAV]
[ABOUTBOX]
  [CONTAINER/ROW]
   [SUBNAV]
[LIBRARYBOX]
  [CONTAINER/ROW2]
   [SUBNAV2]
[CONTACTBOX]
  [CONTAINER/ROW3]
   [SUBNAV3]
[FOOTER]
[/MAIN]

我正在使用的Affix JS

//AffixJS
var tfv=$('#carousel-nmhead').offset().top+$('#carousel-nmhead').height();
$('#navbar-main').affix({
  offset: {
    top: tfv,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true));
    }
   }
});

CSS

.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
 }
 .affix-top {
     position: static;
 }
 .affix-bottom {
     position: absolute;
 }

问题

基本上，导航按计划正确地落在我的子导航上方一旦设置了“词缀”类

当它仍然在“附加顶部”时，然后在第一次单击/与菜单交互时 - 导航与子导航重叠，并且只有在随后单击时，导航才会重新定位自己

尝试的解决方案

添加

负边距/填充，
在主要的 3 个内容 div 中创建新的锚 div
尝试在容器上调试这个不同或固定的高度，而不是 min-height 0 !important;
其他分钟杂项。疑难解答
通过谷歌开发工具检查和使用 JS HTML 和 CSS，但没有运气

我是该公司唯一一个从事 CSS/JS 工作的人，也是唯一一个拥有类似 exp 的同事无法理解为什么 Affix 不能处理与导航的第一次点击/交互，而只能处理后续的点击/交互

如果你点击关于（导航有关于/图书馆/联系作为链接），页面会向下跳到关于，如果你第二次点击关于它会向上滚动，因为那是词缀开始的时候，子导航突然弹出在下面。

之后，如果您单击 LIBRARY 或 CONTACT 设置“词缀”类，那么您每次都正确地在它们之间跳转，显示子导航。

但是，如果您再次单击“关于”，则状态会返回到页面顶部，并且您再次单击该按钮两次，这样子导航就会在下方弹出

如果没有代码无法解决这个问题，我会尝试制作一个空白页面，以便我们可以清楚地看到影响

非常感谢！

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

我有一个类似的问题，直到我点击正文中的某个地方才更新词缀。我通过添加$(element).affix('checkPosition') 来修复它

【讨论】：

你在哪里精确添加的？一个全新的线路$(element).affix({'checkPosition'}); ?
隐藏/显示元素时发生了我的特殊情况。所以我在重新显示后立即添加了它。在此之前，它不会更新，直到我点击某些东西。
我明白但有点困惑，你是在 AffixJS 脚本中添加它来调用你的词缀还是一个全新的 JS 函数——有点困惑——你能提供完整的语法或你的 Affix 调用吗？ :)
我做了一个全新的线路：$('#element').show().affix('checkPosition');