bootstrap 垂直滚动监听内容变化示例说明
bootstrap 垂直滚动监听内容变化示例说明
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8">5
<title>Bootstrap 实例</title>6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">8
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>9
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>10
<style>11
body {12
position: relative;13
}14
ul.nav-pills {15
top: 20px;16
position: fixed;17
}18
div.col-sm-9 div {19
height: 250px;20
font-size: 28px;21
}22
#section1 {color: #fff; background-color: #1E88E5;}23
#section2 {color: #fff; background-color: #673ab7;}24
#section3 {color: #fff; background-color: #ff9800;}25
#section41 {color: #fff; background-color: #00bcd4;}26
#section42 {color: #fff; background-color: #009688;}27
28
@media screen and (max-width: 810px) {29
#section1, #section2, #section3, #section41, #section42 {30
margin-left: 150px;31
}32
}33
</style>34
</head>35
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">36
37
<div class="container">38
<div class="row">39
<nav class="col-sm-3" id="myScrollspy">40
<div class="container-fluid"> 41
<div class="container-fluid"> 42
<ul class="nav nav-pills nav-stacked">43
<li class="active"><a href="#section1">Section 1</a></li>44
<li><a href="#section2">Section 2</a></li>45
<li><a href="#section3">Section 3</a></li>46
<li class="dropdown">47
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>48
<ul class="dropdown-menu">49
<li><a href="#section41">Section 4-1</a></li>50
<li><a href="#section42">Section 4-2</a></li> 51
</ul>52
</li>53
</ul>54
</div> 55
</div> 56
</nav>57
<div class="col-sm-9">58
<div id="section1"> 59
<h1>Section 1</h1>60
<p>Try to scroll this section and look at the navigation list while scrolling!</p>61
</div>62
<div id="section2"> 63
<h1>Section 2</h1>64
<p>Try to scroll this section and look at the navigation list while scrolling!</p>65
</div> 66
<div id="section3"> 67
<h1>Section 3</h1>68
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java