ScrollSpy无法正常启动 [英] ScrollSpy Not Working Bootstrap
问题描述
大家好，我使用的是Bootstrap的滚动间谍.我已经应用了一些高度和溢出使滚动条出现，但是在应用滚动条后，滚动条间谍无法工作.我的意思是，当我向上或向下滚动时，导航栏中的链接不会更改.如果删除了我给它的样式，它将开始起作用.这是一个Jsbin代码.希望这会有所帮助，请告诉我我做错了什么事
Hello guys I'm using scroll spy of bootstrap. I have applied some height and a overflow to make the scroll appear but after applying it the scroll spy does not works. I mean that when I scroll up or down the link in the navbar does not changes If I remove the style that I gave it starts working. Here is a Jsbin code. Hope this helps and please tell me what is it that I'm doing wrong
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div style="height:200px; overflow:scroll;">
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
..
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
..
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
..
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
..
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
..
</div>
</div>
</body>
推荐答案
问题是您通过在包装所有节的DIV中使用style="height:500px;overflow:scroll;"覆盖了BODY滚动.
The problem is that you're overriding the BODY scroll by using style="height:500px;overflow:scroll;" in the DIV that wraps all of the sections.
因此，身体永远不会滚动.您可以将ScrollSpy放在此包装DIV上.
As a result, the BODY is never scrolled. You can instead put the ScrollSpy on this wrapper DIV..
<div style="height:500px;overflow:scroll;" data-spy="scroll" data-target="#myNavbar" data-offset="50">
...
</div>
此外，data-target应该是#myNavbar ...
Also, the data-target should be #myNavbar...
这篇关于ScrollSpy无法正常启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
