Javascript 停止来自'的内容；跳跃'；当导航栏固定到屏幕顶部时

我有一个网站，利用引导3导航栏。它位于块div下方280px的位置，滚动到该点时，它会粘在页面顶部

HTML（在标记中）

当它按预期的方式滚动时，它会粘在页面上。但是当'nav'div应用了position:fixed属性时，它就不再在内容流中，并且内容“跳跃”到与nav相同的高度

---

如何防止内容跳转

不要创建像

sticky

这样的自定义类，因为它使用

导航栏固定顶部

类

if (windowpos >= pos.top) {
    s.addClass("navbar-fixed-top");
} else {
    s.removeClass("navbar-fixed-top"); 
}

---

我最近也遇到了这个问题。我通过在导航后面放置一个位置：absolute div并将其用作addClass的滚动点参考来解决这个问题。老实说，我不太清楚它为什么起作用，但它确实起了作用

在标题周围创建一个包装元素。将相同高度应用于包装。 现在，如果将标题固定，包装器元素仍将存在，占据相同的高度

这里有一个例子

$（文档）.ready（函数（）{
var s=$（“资产净值”）；
var pos=s.位置（）；
$（窗口）。滚动（函数（）{
var windowpos=$（window.scrollTop（）；
如果（窗口位置>=位置顶部）{
s、 addClass（“stick”）；
}否则{
s、 移除类（“棒”）；
}
});
});
body{margin:0}
#导航，.nav包装器{
高度：100px；
背景：灰色；
}
.棍子{
位置：固定；
顶部：0px；
宽度：100%；
}

内容

内容

内容

内容

内容

内容

标题
内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容
您可以围绕元素创建一个容器。对容器应用相同的方法。然后你可以将你的标题固定到顶部，但是它的父元素将占据相同的高度。我对你的意思感到困惑。我添加了它作为一个答案。当它滚动到顶部时，它将保留在“header”div的底部，如果用户向上滚动，它会返回到它的位置吗？抱歉，刚才注意到还有一个小的跳跃。没有那么大，不确定这是否是一个浏览器问题。这更像是一个跳转到一边，当它转到修复，它重新调整（减少填充等）
<div id="nav">
  <div class="navbar navbar-default navbar-static">
     <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

...

header {
  height:280px;
}

.stick {
  position:fixed;
  top:0px;
  width: 100%;
}

if (windowpos >= pos.top) {
    s.addClass("navbar-fixed-top");
} else {
    s.removeClass("navbar-fixed-top"); 
}