Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollspy bugs #3316

Closed
bluepines opened this issue May 1, 2012 · 18 comments
Closed

scrollspy bugs #3316

bluepines opened this issue May 1, 2012 · 18 comments
Labels

Comments

@bluepines
Copy link

bluepines commented May 1, 2012

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.

@italianmonti
Copy link

italianmonti commented May 2, 2012

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
Copy link

martinburger commented May 2, 2012

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

@bluepines
Copy link
Author

bluepines commented May 2, 2012

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
Copy link

martinburger commented May 3, 2012

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

@bluepines
Copy link
Author

bluepines commented May 3, 2012

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

@bluepines
Copy link
Author

bluepines commented May 3, 2012

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
Copy link
Author

bluepines commented May 4, 2012

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?

@jemgold
Copy link

jemgold commented May 9, 2012

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
Copy link

gbertb commented May 16, 2012

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

bhulsman commented May 25, 2012

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 added a commit that referenced this issue Jun 3, 2012
@fat
Copy link
Member

fat commented Jun 3, 2012

$('.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!

@fat fat closed this as completed Jun 3, 2012
@Dattaya
Copy link

Dattaya commented Jun 18, 2012

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

@richardp-au
Copy link

richardp-au commented Jun 18, 2012

The next release appears to 2.1.0 so my guess is no.

@Dattaya
Copy link

Dattaya commented Jun 19, 2012

@R1ch0 , thanks

@wigy-opensource-developer

This bug can be still reproduced in 3.3.4 on Firefox and Chrome.

@jelenajjo
Copy link

jelenajjo commented Oct 3, 2015

@bluepines That is exactly what I was looking for!

var offset = 80;

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

Could you help me how to add easing to that, to make the scrolling a bit smoother? I tried but I still can't find a solution. Here is the fiddle example

Thanks!

@twbs-lmvtfy
Copy link

twbs-lmvtfy commented Oct 3, 2015

Hi @jelenajjo!

You appear to have posted a live example (http://fiddle.jshell.net/rjSfP/104/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 114, column 3 thru column 89: Start tag body seen but an element of the same type was already open.
  • line 114, column 3 thru column 89: Cannot recover after last error. Any further errors will be ignored.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@Wilfred
Copy link

Wilfred commented Jun 16, 2016

FWIW, this seems to be a common source of confusion when using scrollspy with a fixed nav. I've written a SO answer demonstrating how to make anchors scroll as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests