Jquery 贴在导航栏上的推特引导-下方的div跳起来

很难描述这个问题。看看这个JSFIDLE：

当导航栏固定到顶部时，内容会跳到其下方

CSS:

---

问题出在哪里？

这里的问题是无法将导航条固定在顶部的信息传达给导航下方容器中的其他内容。您可以使用更现代的CSS来实现这一点，但请注意，这对于较旧的浏览器来说并不是一个解决方案（事实上，postion也存在一些问题：较旧浏览器中的固定属性

.affix + .container {
    padding-top:50px
}

---

这将一直等到导航栏被修复，然后将填充添加到它的同级容器中，防止它在导航下“跳跃”。

我的解决方案，灵感来自@niaccurshi的：

不要硬编码填充顶部，而是创建一个不可见的重复元素，该元素占用相同的空间量，但仅在粘贴原始元素时使用

JS:

CSS:

---

另一种选择是，如果您希望避免重复内容

<script>
    jQuery(document).ready(function(){
        jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
    });
</script>

<style>
.affix-placeholder {
  display: none;
}
.affix + .affix-placeholder {
  display: block;
  visibility: hidden;
  height: /* same as your affix element */;
  width: 100%;
  overflow: auto;
}
</style>

jQuery（文档）.ready（函数（）{
jQuery（“”）.insertAfter（“.子菜单：last”）；
});
.粘贴占位符{
显示：无；
}
.词缀+.词缀占位符{
显示：块；
可见性：隐藏；
高度：/*与粘贴元素相同*/；
宽度：100%；
溢出：自动；
}

您还可以使用引导粘贴事件通过CSS类在相关元素中添加和删除填充（或边距）：

// add padding or margin when element is affixed
$("#navbar").on("affix.bs.affix", function() {
  return $("#main").addClass("padded");
});

// remove it when unaffixed
$("#navbar").on("affix-top.bs.affix", function() {
  return $("#main").removeClass("padded");
});

---

下面是一个JSIDLE:

在其上方的部分周围添加一个标题包装，并为包装指定一个最小高度，该高度等于这些元素的组合高度

例如：

<div class="header-wrapper" >
   <div class="topbar" >this bar is 36 pixels high</div>
   <div class="menubar">this menubar has a height of 80 pixels</div>
</div>

<div class="" >Your container moving upwards after the affix element becomes fixed</div>

---

非常简单且简洁的解决方案

谢谢你的工作！你的回答确实正确，例如，它在IE8上看起来很奇怪。我要寻找一些黑客补丁…这在我遇到的一个类似问题中也起了作用，只是它与引导无关。谢谢你！这是一个简洁的解决方案，尽管你可能值得尽你所能在duplica上设置ARIA属性ted标题栏，以确保屏幕阅读器忽略它（不要两次阅读标题栏中的内容）我真的很喜欢这个。它不需要找出填充好的解决方案的数量，我喜欢它。这是一个坚实的解决方案，但我宁愿考虑<代码>粘贴。BS。词缀< /代码>和<代码>粘贴顶部。BS。词缀< /代码>事件，以便它在每次转换期间只触发一次。

<script>
    jQuery(document).ready(function(){
        jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
    });
</script>

<style>
.affix-placeholder {
  display: none;
}
.affix + .affix-placeholder {
  display: block;
  visibility: hidden;
  height: /* same as your affix element */;
  width: 100%;
  overflow: auto;
}
</style>

// add padding or margin when element is affixed
$("#navbar").on("affix.bs.affix", function() {
  return $("#main").addClass("padded");
});

// remove it when unaffixed
$("#navbar").on("affix-top.bs.affix", function() {
  return $("#main").removeClass("padded");
});

<div class="header-wrapper" >
   <div class="topbar" >this bar is 36 pixels high</div>
   <div class="menubar">this menubar has a height of 80 pixels</div>
</div>

<div class="" >Your container moving upwards after the affix element becomes fixed</div>

.header-wrapper {
  min-height: 116px;
}