Exclude ID in Twitter Bootstrap Scrollspy

Question

I have a Twitter Bootstrap site with a main menu full of links. I have Scrollspy setup to target that menu and works great.

However, I need scrollspy to exclude the

Answer 1

I'm not aware of any "easy" fix for your situation. However you can use the "activate" event to check for the ID and act upon it:

$('#myscrollspyID li').on('activate',  function(){
     var id = $(this).find("a").attr("href");
     if (id === "#yourlastID"){
          //do something, i.e. remove all active classes from your scrollspy object, so  none are shown as active
     }
}

P.S: this i pretty rough code, but I modified some code I am using myself. I use the active event to check the ID of the active item, and change the background color of the navigator bar to the color corresponding to the active item :-)

Answer 2

I suggest you extend ScrollSpy with that desired functionality, like this https://stackoverflow.com/a/13460392/1407478

ScrollSpy extension with excludeable ID's :

// save the original function object
var _superScrollSpy = $.fn.scrollspy;

// add a array of id's that need to be excluded
$.extend( _superScrollSpy.defaults, {
    excluded_ids : []
});

// create a new constructor
var ScrollSpy = function(element, options) {
    _superScrollSpy.Constructor.apply( this, arguments )
}

// extend prototypes and add a super function
ScrollSpy.prototype = $.extend({}, _superScrollSpy.Constructor.prototype, {
    constructor: ScrollSpy
    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superScrollSpy.Constructor.prototype[args.shift()].apply(this, args)
    }
    , activate: function (target) {
        //if target is on our exclusion list, prevent the scrollspy to activate
        if ($.inArray(target, this.options.excluded_ids)>-1) {
            return
        }
        this._super('activate', target)
    }
});

// override the old initialization with the new constructor
$.fn.scrollspy = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    //this runs everytime element.scrollspy() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data('scrollspy'),
            options = $.extend({}, _superScrollSpy.defaults, $this.data(), typeof option == 'object' && option)

        if (!data) {
            $this.data('scrollspy', (data = new ScrollSpy(this, options)))
        }
        if (typeof option == 'string') {
            data[option].apply( data, args )
        }
    });
}, $.fn.scrollspy);

For the example at http://twitter.github.com/bootstrap/javascript.html#scrollspy, and if you want the ScrollSpy to prevent showing #mdo, it should be initialized like this

$(".scrollspy-example").scrollspy({
    excluded_ids : ['#mdo']
});

you could try to place the code in a separate file, scrollspy-addon.js, include it and initialize your scrollspy with

$("#your-scrollspy-id").scrollspy({
    excluded_ids : ['#login']
});