Javascript 引导粘贴属性，使标题下方具有固定导航

我试图创建一个带有标题的页面，并且在下面创建一个导航，当您滚动到某个点时，该导航是固定的

我试图使用内置的“粘贴”插件，但我有点挣扎。我已经修复了导航不在添加这些行的同一位置的一些问题

.navbar.affix {
top:0px;
width:100%;
z-index:11;}

但是，当它将页面固定到顶部时，页面会跳起来，因此它不是一个平滑的过渡。我理解为什么，我认为，因为导航的空间现在没有被使用，所以其余的内容向上移动

我需要做什么才能在导航被修复时，内容不会向上移动

提前谢谢

---

演示-

这里有一个javascript解决方案：

$('.navbar[data-spy="affix"]').on('affix.bs.affix', function () {
    var $this = $(this);
    var $fix = $('<div class="affix-height-fix">').height($this.outerHeight(true));
    $this.after($fix);
}).on('affix-top.bs.affix', function () {
    $(this).next('.affix-height-fix').remove();
});

$（'.navbar[data spy=“affix”]'）。on（'affix.bs.affix'，函数（）{
var$this=$（this）；
var$fix=$（''）.height（$this.outerHeight（true））；
$this.after（$fix）；
}).on（'affix-top.bs.affix'，函数（）{
$（this）.next（'.affix height fix'）.remove（）；
});

---

基本上，当导航栏固定在页面顶部时，它会添加一个与导航栏高度相同的新元素，以便其他元素不会向上移动。当导航栏重置其位置时，添加的元素将被删除。

感谢您的响应。它似乎工作良好，但它似乎导致滚动不正常工作后，导航是固定的@Sambolina你能用卷轴描述一下这个问题吗？我没有注意到小提琴里有什么奇怪的东西对不起，我本来是在Chrome上看的，基本上右边的滚动条会锁定在顶部，即使在滚动的时候。刚在Firefox和Safari上试用过，但效果不错。刚把它上传到最初的演示站点，滚动问题就不存在了，即使是在Chrome上。谢谢你的帮助！！