function ScrollSpy(){} //构造函数

ScrollSpy.prototype = {} //构造器的原型

$.fn.scrollspy = function ( option ){} //jQuery原型上的自定义方法

$.fn.scrollspy.Constructor = ScrollSpy // jQuery原型上的自定义方法

$.fn.scrollspy.defaults = {} //默认参数

$(function(){}) //初始化执行

<style type="text/css">

        .scrollspy-example { height: 200px; overflow: auto; position: relative;}

    </style>

<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>

/*

  * 初始化执行

  * */

  $(function () {

    $('[data-spy="scroll"]').each(function () {

      var $spy = $(this)

      $spy.scrollspy($spy.data())

    })

  })

 /*

  * jQuery原型上的自定义方法

  * */

  $.fn.scrollspy = function ( option ) {

    return this.each(function () {

      var $this = $(this)

        , data = $this.data('scrollspy')

        , options = typeof option == 'object' && option;

      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))//实例化ScrollSpy

      if (typeof option == 'string') data[option]()//传入方法名，执行该方法

    })

  }

/*

  * 构造器

  * */

  function ScrollSpy( element, options) {

    var process = $.proxy(this.process, this)//给原型上的process方法在该作用域下取了个别称

      , $element = $(element).is('body') ? $(window) : $(element)

      , href

    //console.log($element);//window对象

    this.options = $.extend({}, $.fn.scrollspy.defaults, options)

    //console.log(this.options);

    this.$scrollElement = $element.on('scroll.scroll.data-api', process)//绑定scorll事件，执行process方法,返回window的jQuery对象

    this.selector = (this.options.target

      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7

      || '') + ' .nav li > a' //获取头标题的各个a标签

    this.$body = $('body').on('click.scroll.data-api', this.selector, process)//给头标题的各个a标签绑定事件，以便点击后可以跳到指定的内容，返回body的jQuery对象

    this.refresh()

    this.process()//调用原型上的process方法

  }

/*

      * position() 方法返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。

      * 获取各个标签对应内容的高度

       * */

    , refresh: function () {

        this.targets = this.$body

          .find(this.selector)//查找头标题的各个a标签

          .map(function () {

            var href = $(this).attr('href')

            return /^#\w/.test(href) && $(href).length ? href : null

          })//得到一个object对象，根据index去获取其中类容，有点类数组

        this.offsets = $.map(this.targets, function (id) {

          return $(id).position().top//获取各个标签对应内容的高度

        })

      }

/*

      * 逻辑控制

      * 初始化时，activeTarget为空，scrollTop为0，for循环的第二个判断条件scrollTop >= offsets[i]中将判断false，当i为0时

      * ，targets[0]为#fat时，满足for循环的前三个条件，进入activate方法，

      *

      * */

    , process: function () {

        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset

          , offsets = this.offsets //div内容的高度集合

          , targets = this.targets //div内容的id集合对象

          , activeTarget = this.activeTarget

          , i

for (i = offsets.length; i--;) {

          activeTarget != targets[i]

            && scrollTop >= offsets[i]

            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])

            && this.activate( targets[i] )

        }

      }

/*

      * 逻辑控制后续执行

      * 初始化时将activeTarget设成#fat,所以默认刷新时'红利'这块显示被点击。当我们点击'哈芬'时，通过命名锚直接跳到命名锚的链接

      * 注意其他有两个过程：1.点击'哈芬'按钮，2.滚动条运动，两者都触发了事件。最后都进入了process方法。

      *

      * */

    , activate: function (target) {

        var active

this.activeTarget = target//设置activeTarget属性

        this.$body

          .find(this.selector).parent('.active')

          .removeClass('active')//找到头标题中父节点拥有active类的a标签，并删除a标签的父节点上的active

        active = this.$body

          .find(this.selector + '[href="' + target + '"]')

          .parent('li')

          .addClass('active')//在头标题中，给拥有href='xx'属性的a标签的父节点加上active属性,返回li标签

        if ( active.parent('.dropdown-menu') )  {

          active.closest('li.dropdown').addClass('active')

        }

      }