Bootstrap scrollspy无法在固定导航栏上运行

时间:2015-01-02 08:24:26

标签: jquery html css twitter-bootstrap scrollspy

在下面的代码中,我无法在固定导航栏上执行scrollspy,尽管我给出了位置:相对于页面的滚动区域。 任何人请帮我找到滚动间谍固定导航栏的解决方案。 提前谢谢。

HTML

<div id="content" data-spy="scroll" target=".scroller-spy">
    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div id=navcontents class="scroller-spy">
                <nav class="nav collapse collapse">
                <ul>
                    <li><a href="#one">one</a>

                    </li>
                    <li><a href="#two">two</a>

                    </li>
                    <li><a href="#three">three</a>

                    </li>
                    <li><a href="#four">four</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row container">
    <div id="one">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat est egestas, pretium tellus id, egestas mauris. Vestibulum porttitor, massa tristique sodales rutrum, ex elit pulvinar urna, at suscipit quam arcu a turpis. Suspendisse ut hendrerit ligula. Mauris at diam accumsan, mollis risus a, venenatis magna. Phasellus sem arcu, lobortis id sapien quis, fringilla faucibus nulla. Ut fermentum gravida sem non malesuada. Suspendisse potenti. Fusce ullamcorper elit at ornare lacinia.</p>
    </div>
    <div id="two">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat est egestas, pretium tellus id, egestas mauris. Vestibulum porttitor, massa tristique sodales rutrum, ex elit pulvinar urna, at suscipit quam arcu a turpis. Suspendisse ut hendrerit ligula. Mauris at diam accumsan, mollis risus a, venenatis magna. Phasellus sem arcu, lobortis id sapien quis, fringilla faucibus nulla. Ut fermentum gravida sem non malesuada. Suspendisse potenti. Fusce ullamcorper elit at ornare lacinia.</p>
    </div>
    <div id="three">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat est egestas, pretium tellus id, egestas mauris. Vestibulum porttitor, massa tristique sodales rutrum, ex elit pulvinar urna, at suscipit quam arcu a turpis. Suspendisse ut hendrerit ligula. Mauris at diam accumsan, mollis risus a, venenatis magna. Phasellus sem arcu, lobortis id sapien quis, fringilla faucibus nulla. Ut fermentum gravida sem non malesuada. Suspendisse potenti. Fusce ullamcorper elit at ornare lacinia.</p>
    </div>
    <div id="four">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat est egestas, pretium tellus id, egestas mauris. Vestibulum porttitor, massa tristique sodales rutrum, ex elit pulvinar urna, at suscipit quam arcu a turpis. Suspendisse ut hendrerit ligula. Mauris at diam accumsan, mollis risus a, venenatis magna. Phasellus sem arcu, lobortis id sapien quis, fringilla faucibus nulla. Ut fermentum gravida sem non malesuada. Suspendisse potenti. Fusce ullamcorper elit at ornare lacinia.</p>
    </div>
</div>

CSS

a:active, a:hover {
    background-color:green;
}
.row {
    height:200px;
    overflow:auto;
}
.row.container
{
    position:relative;
}

这是js小提琴,

http://jsfiddle.net/hy5w6qkf/1/#&togetherjs=O3BMmqfiD8

0 个答案:

没有答案