change scrollspy offset to be option + fix typo in scrollspy

docs/javascript.html

@@ -549,7 +549,7 @@ $('#myModal').on('hidden', function () {
               </div>
             </div>
           </div>
-          <div data-spy="scroll" data-target="#navbarExample" class="scrollspy-example">
+          <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
             <h4 id="fat">@fat</h4>
             <p>
             Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@@ -576,11 +576,30 @@ $('#myModal').on('hidden', function () {
           <hr>
           <h2>Using bootstrap-scrollspy.js</h2>
           <p>Call the scrollspy via javascript:</p>
-          <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
+          <pre class="prettyprint linenums">$('#navbar').scrollspy()</pre>
           <h3>Markup</h3>
           <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).
           <pre class="prettyprint linenums">&lt;body data-spy="scroll" &gt;...&lt;/body&gt;</pre>
            <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
+          <h3>Options</h3>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 100px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>offset</td>
+               <td>number</td>
+               <td>10</td>
+               <td>Pixels to offset from top when calculating position of scroll.</td>
+             </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </section>

js/bootstrap-scrollspy.js

@@ -24,15 +24,14 @@
   /* SCROLLSPY CLASS DEFINITION
    * ========================== */
 
-  function ScrollSpy( element ) {
+  function ScrollSpy( element, options) {
     var process = $.proxy(this.process, this)
-
+    this.options = $.extend({}, $.fn.scrollspy.defaults, options)
     this.$scrollElement = $(element).on('scroll.scroll.data-api', process)
     this.selector = (this.$scrollElement.attr('data-target')
       || this.$scrollElement.attr('href')
       || '') + ' .nav li > a'
     this.$body = $('body').on('click.scroll.data-api', this.selector, process)
-
     this.refresh()
     this.process()
   }
@@ -55,7 +54,7 @@
       }
 
     , process: function () {
-        var scrollTop = this.$scrollElement.scrollTop() + 10
+        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
           , offsets = this.offsets
           , targets = this.targets
           , activeTarget = this.activeTarget
@@ -98,17 +97,25 @@
     return this.each(function () {
       var $this = $(this)
         , data = $this.data('scrollspy')
-      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this)))
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
       if (typeof option == 'string') data[option]()
     })
   }
 
   $.fn.scrollspy.Constructor = ScrollSpy
 
+  $.fn.scrollspy.defaults = {
+    offset: 10
+  }
+
 
  /* SCROLLSPY DATA-API
   * ============== */
 
-  $(function () { $('[data-spy="scroll"]').scrollspy() })
+  $(function () {
+    var $spy = $('[data-spy="scroll"]')
+    $spy.scrollspy($spy.data())
+  })
 
 }( window.jQuery )
\ No newline at end of file