Question

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

当您打开它时，导航栏是白色的，但是当您尝试滚动时，导航栏的颜色（及其高度）会发生变化。我认为这是一个错误。有谁知道如何解决它？我对bootstrap不是很熟悉，因为我只用了几个小时才开始工作。

我读过关于bootstrap的scrollspy函数，但我不确定这是javascript还是css问题？

谢谢

Answer 1

如果我没有误解你，你所描述的不是一个Bootstrap错误，而是一个＆＃34; bug＆＃34;在导航栏中的行为。我试着解释一下。

该导航栏正在使用this Javascript code在滚动时更改其大小和背景颜色。它几乎与您在this tutorial中可以找到的完全相同的代码，我猜这是用于导航栏的模板的制造商。

只有当您在页面中间某处加载指向某个锚点的页面时，才会发生您描述的行为。我的意思是，您问题中的链接指向http://ironsummitmedia.github.io/startbootstrap-agency/#about。但是，如果我删除#about部分并刷新，则颜色不会闪烁，尺寸也不会改变。

为什么呢？导航栏正在这样做：当页面加载时，它应该是大而透明的，因此用户可以看到它背后巨大的漂亮图像。然后，当用户滚动一点时，它会收缩并获得稳固的背景。

但似乎代码，因为它是一个非常简单的代码，并没有考虑到页面没有从顶部加载的情况。因此，当您在#about锚点加载它时，它首先以其初始状态（大而透明）呈现，然后，当执行javascript时，它会发生变化。这种情况发生得足够慢，值得注意。

我要说下面代码中的250是造成可见延迟的原因。它在页面加载后等待250毫秒，然后添加或删除触发导航栏样式更改的类。

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

你能做什么：

作为一种快速解决方案，如果您下载了模板代码，则可以尝试将250更改为1，尽管在切换到导航栏之前导航栏可能仍会显示第一个状态的快速闪烁第二个，我不确定。或者，如果您不想要动画导航栏，只需删除Javascript并根据需要编辑CSS。

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

bootstrap主题导航栏错误修复

1 个答案: