如本例所示,Bootstrap Scrollspy会跳过导航,但实际上并没有按预期的那样工作。错误的项目正在获取.active
类。
$('.spycontent').scrollspy({ target: 'nav' })
html, body {
height:100%;
}
body > .container, body > .container > .row, .col-xs-6 {
height:100%;
}
.col-xs-6 {
overflow-y:auto;
}
.item {
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<nav class="col-xs-6">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#group1">group1</a>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#question1">question1</a>
</li>
<li>
<a href="#question2">question2</a>
</li>
</ul>
</li>
<li>
<a href="#group2">group2</a>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#question3">question3</a>
</li>
<li>
<a href="#question5">question5</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="col-xs-6 spycontent">
<div class="col-xs-12" id="group1">
group1
<div class="row">
<div class="col-xs-12 item" id="question1">
question1
</div>
<div class="col-xs-12 item" id="question2">
question2
</div>
</div>
</div>
<div class="col-xs-12" id="group2">
group2
<div class="row">
<div class="col-xs-12 item" id="question3">
question3
</div>
<div class="col-xs-12 item" id="question5">
question5
</div>
</div>
</div>
</div>
</div>
</div>
菜单和内容对我来说看起来很完美,为什么突出显示了错误的项目?
最佳答案
我发现发生了什么:
当我告诉浏览器另一列中嵌套了一个列时,浏览器以某种方式与我不同意。 TWBS CSS弄乱了位置。删除巢解决了我的问题:
$('.spycontent').scrollspy({ target: 'nav' })
html, body {
height:100%;
}
body > .container, body > .container > .row, .col-xs-6 {
height:100%;
}
.col-xs-6 {
overflow-y:auto;
}
.item {
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<nav class="col-xs-6">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#group1">group1</a>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#question1">question1</a>
</li>
<li>
<a href="#question2">question2</a>
</li>
</ul>
</li>
<li>
<a href="#group2">group2</a>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#question3">question3</a>
</li>
<li>
<a href="#question5">question5</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="col-xs-6 spycontent">
<div id="group1">
group1
<div class="row">
<div class="col-xs-12 item" id="question1">
question1
</div>
<div class="col-xs-12 item" id="question2">
question2
</div>
</div>
</div>
<div id="group2">
group2
<div class="row">
<div class="col-xs-12 item" id="question3">
question3
</div>
<div class="col-xs-12 item" id="question5">
question5
</div>
</div>
</div>
</div>
</div>
</div>
关于javascript - 滚动选择错误的元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38454029/