在Bootstrap中控制特定距离后显示固定的标题

时间:2015-08-22 11:19:32

标签: javascript html css twitter-bootstrap

我使用Bootstrap affix属性在滚动到100px后显示标题。当我将opacity属性设置为0.0001等但我将其设置为0或display设置为none时,它可以正常工作。它停止工作。这是一个带有不透明度属性的工作演示 - http://jsfiddle.net/gu33f5cm/

设置不透明度的一个问题是它仍占用文档中的空间,并且文档在标题位置显示为空白。这是我的CSS代码:

CSS:

#nav.affix {
position: fixed;
top: 0;
width: 100%;
transition: 0.6s all;
}
#nav.affix-top {
opacity:0.1;
}

HTML:

<div class="container" data-spy="affix" data-offset-top="100" id="nav">
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12"> <a class="brand" href="#">Home</a>

                <ul class="nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

您使用的是什么版本的bootstrap?在v3.3.5中有一个单独的导航类,可以根据需要使用。 http://getbootstrap.com/examples/navbar/