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 last link in the menu. Is there any easy option or attribute to do this? Each link has an ID.

To note, the last menu item is called, "Login" has an ID and clicking it opens a Twitter Modal. However since the modal is in the code even when not loaded it's affecting the scrollspy.

So just need a way to tell exclude an ID so something hypothetically like:

score 1 · Answer 1 · answered Dec 08 '12 at 23:29

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

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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']
});

Exclude ID in Twitter Bootstrap Scrollspy

2 Answers2

Linked