Skip to content

Instantly share code, notes, and snippets.

@udawtr
Created December 19, 2013 01:06

Revisions

  1. udawtr created this gist Dec 19, 2013.
    144 changes: 144 additions & 0 deletions bootstrap-scrollspy-custom.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,144 @@
    /* =============================================================
    * bootstrap-scrollspy.js v2.0.2
    * http://twitter.github.com/bootstrap/javascript.html#scrollspy
    * =============================================================
    * Copyright 2012 Twitter, Inc.
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    * ============================================================== */

    !function ( $ ) {

    "use strict"

    /* SCROLLSPY CLASS DEFINITION
    * ========================== */

    function ScrollSpy( element, options) {
    this.options = $.extend({}, $.fn.scrollspy.defaults, options)
    this.bind(element, this.options.target)
    }

    ScrollSpy.prototype = {

    constructor: ScrollSpy

    , clean: function () {
    this.$scrollElement.off()
    this.$body.off()
    }

    , bind: function (element, target) {
    var process = $.proxy(this.process, this)
    , $element = $(element).is('body') ? $(window) : $(element)
    , href
    this.$scrollElement = $element.on('scroll.scroll.data-api', process)
    this.selector = (target
    || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
    || '') + ' .nav li > a'
    this.$body = $('body').on('click.scroll.data-api', this.selector, process)
    this.refresh()
    this.process()
    }

    , rebind: function () {
    this.clean();
    this.bind(this.$scrollElement, this.options.target)
    }

    , refresh: function () {
    this.targets = this.$body
    .find(this.selector)
    .map(function () {
    var href = $(this).attr('href')
    return /^#\w/.test(href) && $(href).length ? href : null
    })

    this.offsets = $.map(this.targets, function (id) {
    return $(id).position().top
    })
    }

    , process: function () {
    var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
    , offsets = this.offsets
    , targets = this.targets
    , activeTarget = this.activeTarget
    , i

    for (i = 0 ; i < offsets.length; i++) {
    if ( scrollTop > offsets[i]
    && (!offsets[i + 1] || scrollTop <= offsets[i + 1] - 2)
    && (!offsets[i - 1] || offsets[i - 1] < offsets[i])
    && offsets[i] != 0) {
    if (activeTarget != targets[i]) {
    this.activate(targets[i]);
    return;
    }
    }
    }
    }

    , activate: function (target) {
    var active

    this.activeTarget = target

    this.$body
    .find(this.selector).parent('.active')
    .removeClass('active')

    active = this.$body
    .find(this.selector + '[href="' + target + '"]')
    .parent('li')
    .addClass('active')

    if ( active.parent('.dropdown-menu') ) {
    active.closest('li.dropdown').addClass('active')
    }
    }

    }


    /* SCROLLSPY PLUGIN DEFINITION
    * =========================== */

    $.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)))
    if (typeof option == 'string') data[option]()
    })
    }

    $.fn.scrollspy.Constructor = ScrollSpy

    $.fn.scrollspy.defaults = {
    offset: 10
    }


    /* SCROLLSPY DATA-API
    * ================== */

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

    }( window.jQuery );