欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

bootstrap scrollspy.js 滚动监听

来源: 开发者 投稿于  被查看 13302 次 评论:223

bootstrap scrollspy.js 滚动监听


html 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style type="text/css">
    .scrollspy-example { height: 200px; overflow: auto; position: relative;}
    .nav>.active{background-color: #ccc;}
</style>
<body>
<div class="container-fluid pc">
<section class="row">
<div id="navbarExample" class="navbar navbar-static">
    <div class="navbar-inner">
        <div class="container" style="width: auto;">
            <a class="brand" href="#">项目名称</a>
            <ul class="nav">
                <li class="active">
                    <a href="#fat">红利</a>
                </li>
                <li>
                    <a href="#mdo">哈芬</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="scrollspy-example" data-offset="0" data-target="#navbarExample" data-spy="scroll">
    <h4 id="fat">红利</h4>
    <p>
        中方向美方承诺提高国有企业红利上缴比例,增加上缴利润的中央国企和省级国企的数量,将国有资本经营预算纳入国家预算体系。还承诺,鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。
        <br>
        <br>
        美方认为,提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支,从而有可能降低中国人大量储蓄的必要性,让他们提高消费支出,从而达到刺激中国内需的目的。
    </p>
    <h4 id="mdo">哈芬</h4>
    <p>
        据估,中国高铁槽道市场约十几亿元,德国哈芬占70%。业内人士称,中铁设计院的铁道图纸,直接指定使用哈芬,而非技术标准。哈芬在德国使用成本高昂的不锈钢,在中国则是碳钢。更有业内人士证实,目前中国高铁用的实为国内生产,原产几乎不足四分之一。(财新)
    </p>
    <h4 id="one">遛狗</h4>
    <p> 近日,拍摄于四川绵阳街头的一张照片引起热议,一辆在路上行驶的法院警车,车窗里伸出一个宠物狗的脑袋,四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知,这是我国新近引进的一批特殊品种警犬,为麻痹犯罪分子,故意化妆成宠物狗的样子。 </p>
    <h4 id="two">失踪</h4>
    <p> 4月25日,19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时,竟然发现这一区域已先后有8名青少年失踪,其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车,被扔进黑砖窑强迫劳动,后逃离黑砖窑重获自由。 </p>
    <h4 id="three">耳光</h4>
    <p> 30多岁女人直接吐东西在刚扫过的地上,环卫大姐上去说了两句,结果挨了三巴掌三脚。见到被打的环卫大姐时,她精神不好,坐在凳子上不说话,左脸的伤痕还很显眼,工友在一旁照料她。2012年5月4日,浙江省,杭州市。 </p>
    <p> 尹大姐说:“小孩子都知道不能在街上乱吐。”那女人说:那不就是你们环卫应该做的事情吗?尹大姐说:难道我们环卫工人就低人一等吗?”话音刚落,“啪”“啪”“啪”三个巴掌落在尹大姐脸上。 </p>
</div>
</section>
</div><!-- container-fluid -->
<script src="js/jquery-2.1.4.min.js"></script>
<!--[if lt IE 9]><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><![endif]-->
<script src="js/bootstrap.min.js"></script>
<script src="js/Common.js"></script>
<script type="text/javascript">
    $(function () {
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this)
      $spy.scrollspy($spy.data())
    })
  })
</script>
</body>
</html>

用户评论