rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

change scrollspy offset to be option + fix typo in scrollspy

Browse Source
This commit is contained in:
Jacob Thornton 2012-01-21 21:35:20 -08:00
parent 719713ca87
commit 2187e0838f
2 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/javascript.html
View File

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

19
js/bootstrap-scrollspy.js vendored
View File

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