bootstrap滚动监听示例

<!--  Bootstrap 核心 CSS 文件 ,其实 只应用了一部分样式,开发中使用时把不必要的样式去掉,否则会对项目整体样式产生影响 ,案例下载 http://download.csdn.net/detail/u011411069/9080293 --><link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap的js文件之前引入 --><script src="jquery-1.9.1.js"></script><!-- Bootstrap 滚动监听js文件,使用3.3.5版本,jquery版本过低会报错 --><script type="text/javascript" src="bootstrap-3.3.5/js/scrollspy.js"></script><!--代码说明--><div id="main"><!--左侧导航--><div id="left"><!--导航栏 id自定义 需引用以下样式--><nav id="navbar" class="navbar navbar-default"><ul class="nav navbar-nav"><!--在内容标题出设置链接锚点--><li><a href="#one">标题1</a></li><li><a href="#two">标题2</a></li><li><a href="#three">标题3</a></li><li><a href="#four">标题4</a></li></ul></nav></div><!--右侧内容--><!--无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。--><!--在目标 div 中添加 'data-spy="scroll" ','data-target="#navbar"'指定了其对应的导航栏id,'data-offset="100"'指定了当计算滚动条位置时从顶部开始偏移的像素数--><div id="right" data-spy="scroll" data-target="#navbar" data-offset="100"><h2 id="one">标题1</h2><div style="width:auto;">内容1内容1内容1内容1内容1内容1............................................................<div/><h2 id="two">标题2</h2><div style="width:auto;">内容2内容2内容2内容2内容2内容2............................................................<div/><h2 id="three">标题3</h2><div style="width:auto;">内容3内容3内容3内容3内容3内容3内容3............................................................<div/><h2 id="four">标题4</h2><div style="width:auto;">内容1内容1内容1内容1内容1内容1内容1............................................................<div/></div></div>