Twitter bootstrap 引导主题导航栏错误修复

我搜索了bootstrap的一些主题，发现：

打开导航栏时，导航栏为白色，但当尝试滚动时，导航栏的颜色（及其高度）会发生变化。我认为这是一个错误。有人知道怎么修吗？我对bootstrap不是很熟悉，因为我只在几个小时后使用它

我读过有关引导的

scrollspy

功能的文章，但我不确定这是javascript还是css问题

---

谢谢你

如果我没有误解你的话，你所描述的不是引导错误，而是导航栏行为中的“错误”。我会尽力解释的

导航栏用于更改滚动条上的大小和背景色。这几乎是你能在中找到的完全相同的代码，我猜这就是模板制造商用于导航栏的代码

<>你所描述的行为只有在页面中的某个页面上加载一个锚时才会发生。我的意思是，你问题中的链接指向

http://ironsummitmedia.github.io/startbootstrap-agency/#about

。但是，如果我删除

#about

部分并刷新，则颜色不会闪烁，大小也不会改变

为什么?？导航栏就是这样做的：当页面加载时，它应该是大而透明的，这样用户就可以看到它后面巨大而漂亮的图像。然后，当用户滚动一点时，它会缩小并获得一个坚实的背景

但是，由于这是一个取自教程的非常简单的代码，因此它似乎没有考虑页面不是从顶部加载的情况。因此，当您在

#about

锚点加载它时，它首先以其初始状态（大而透明）呈现，然后，当javascript被执行时，它会发生变化。这种情况发生得很慢，足以引起注意

我认为下面代码中的

250

就是它导致可见延迟的原因。它在页面加载后等待250毫秒，然后添加或删除触发navbar样式更改的类

function init() {
    window.addEventListener( 'scroll', function( event ) {
        if( !didScroll ) {
            didScroll = true;
            setTimeout( scrollPage, 250 );
        }
    }, false );
}

你能做什么：

作为一个快速解决方案，如果您下载了模板代码，您可以尝试将

250

更改为

1

，尽管导航栏在切换到第二个状态之前可能仍会显示第一个状态的快速闪烁，我不确定。或者，如果您不需要动画导航栏，只需删除Javascript并编辑CSS即可

---

但是，如果您真的不需要在特定的锚点打开页面，或者如果您不介意快速转换导航栏，那么就更容易保持原样

这不是一个错误，有时暗图像加载缓慢。使用较小的图像jpg，并在img标签上的图像后面放置一个黑色背景，这将取消加载时间。您从哪里获得此代码？

scrollPage

是否为现有功能？我不想让它向上滚动，只有导航栏应该设置正确。这在我的第二段中有解释。我只是查看了模板使用的js代码（使用Chrome开发工具，Sources选项卡），看到了一个名为

cbpAnimatedHeader.jsv1.0.0

的js文件（第一个链接）。我在谷歌上搜索了一下，找到了教程（第二个链接）。是的，

scrollPage

是一个函数，你可以在这些链接中看到它的功能。顺便说一下，我在Chrome开发工具中找到了代码。请下次再详细说明你的问题，先做一些调查或发布一些代码通常对回答问题的人很有帮助。谢谢。当我将相同的函数设置为

window.addEventListener（“DOMContentLoaded”，…，false）时即使在重新加载后也能工作不客气，很高兴它有帮助！