Question

我尝试创建一个带标题的页面，并在滚动到某一点时修复了下面的导航。

我试图使用内置的＆＃39;词缀＆＃39;插件，但我有点挣扎。我修复了一些问题，导航没有坐在添加这些线的同一个地方..

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

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

我需要做什么才能在导航得到修复后，内容不会向上移动？

提前致谢。

演示 - http://samtodd.co.uk/header-navigation.html

Answer 1

这是一个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();
});

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

Bootstrap affix属性在标题下方有一个固定的导航

1 个答案: