scrollspy bugs

[bluepines]

hey, i am having a ton of issues getting scrollspy to work properly.

Issue 1:

$('.navbar').scrollspy({offest: 70});

Changing the offest and then clicking on the links does nothing. It refuses to acknowledge the offest when you click the links although it does respect the offset when you are scrolling down the page.

Issue 2:

 $('.navbar li').on('activate', function(){console.log('activate')});

This callback does not get called because of this line, which I'm guessing always evaluates to true.

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

Also, I am getting weird behavior where one of the last nav element is auto selected.

[AegirisSystems]

This happened to me. I eventually used:

$(document).ready(function() {
$('body').attr('data-spy', 'scroll').attr('data-target', '#historynav').attr('data-offset', '50');
});

with

$('.navbar').scrollspy();

And I didn't have the last <li> as active anymore.

Also, I could not get data-offset to do anything, so I added padding to the top of each id that I was using for scroll spy

[martinburger]

For the issue that the navigation does not work as soon as the last element gets activated, see Issue #3322 as well.

[bluepines]

So this is how I got it to finally go to the proper place when you click on the navigation. I added an event handler for the navigation clicks. Then you can just use "scrollBy" to move up on the offset.

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

[martinburger]

The above workaround did not work for me - still the same buggy behavior.

[bluepines]

What part of it did not work. I think those two functions "scrollIntoView" and "scrollBy" are cross browser.

[bluepines]

OK, well my solution(s) are not fool proof since the thing still seems screwed up in FF. Anybody know of some better scrollspy code out there?

[bluepines]

The scrollspy on the bootstrap main doc page seems to work:

http://twitter.github.com/bootstrap/assets/js/application.js

Here is some code I found in that script:

// fix sub nav on scroll
var $win = $(window)
  , $nav = $('.subnav')
  , navTop = $('.subnav').length && $('.subnav').offset().top - 40
  , isFixed = 0

processScroll()

// hack sad times - holdover until rewrite for 2.1
$nav.on('click', function () {
  if (!isFixed) setTimeout(function () {  $win.scrollTop($win.scrollTop() - 47) }, 10)
})

$win.on('scroll', processScroll)

function processScroll() {
  var i, scrollTop = $win.scrollTop()
  if (scrollTop >= navTop && !isFixed) {
    isFixed = 1
    $nav.addClass('subnav-fixed')
  } else if (scrollTop <= navTop && isFixed) {
    isFixed = 0
    $nav.removeClass('subnav-fixed')
  }
}

Notice that "sad hack" statement in the comments. Do any of the bootstrap gods have any advice or insight here?

[jem-computer]

Same problem - non-standard nav size, fine most of the time but falls over when I resize my browser window (using a custom responsive grid, not the Bootstrap one).

Doing some digging around line 71

    , process: function () {
        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
          , maxScroll = scrollHeight - this.$scrollElement.height()
          , offsets = this.offsets
          , targets = this.targets
          , activeTarget = this.activeTarget
          , i

this.options.offset returns 62 no matter how I try to set the offset. I don't know enough about JS to figure out why, but I just did another sad hack -

    , process: function () {
        var myactualoffset = 90
        var scrollTop = this.$scrollElement.scrollTop() + myactualoffset

Seems to work for now. Sadface.

[gbertb]

@bluepines' code works great, thanks!

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

[bhulsman]

I found out that the option 'offset' gets ignored, just editing the default options in the script itself resolves this.

Console.log told me this.options.offset was still 10 after putting 30 in the options.

[fat]

$('.navbar').scrollspy({offest: 70}); is only intended to modify scrolling calculations - we don't shift the actual anchor click stuff, that's on you. The plugin is only for spying on scrolls.

The activate event was a bug - good catch, and it's been fixed in 2.1.0-wip. thanks guys!

[Dattaya]

@fat are you going to merge that commit in the master branch to include the bugfix in a new 2.0.x release?