Bootstrap: ScrollSpy - offset is neglected

[dmnkhhn]

It seems to me as if the offset option in the ScrollSpy is simply neglected.

I am using the ScrollSpy with the fixed navbar and because the navbar overlaps my content I have to specify an offset of at least 40 (px) but passing the option via data attributes or JavaScript doesn't work and the ScrollSpy scrolls too far.

[lunchbag]

I'm seeing the same issue (fixed navbar, scrollspy). I've even tried to change the default offset but that doesn't even work.

[richardp-au]

Scrollspy only watches your scroll position to toggle the active nav button. It doesn't have anything to do with the scrolling that occurs when you click one of those nav buttons. The nav buttons are simply anchor links.

When you click a link, the browser scrolls so the anchor is at the top of the window. If you want to push the text down but leave the top of the anchor element at the top of the window, you'll need to do something like add padding to the element. You can also add a negative margin too if you don't want lots of space above the anchor element.

[lunchbag]

The problem I'm seeing is when I am manually scrolling, not after clicking on a button to jump to the anchor. Even with an offset defined, the scrollspy doesn't seem to detect the anchors until it hits 0px from the top, which gets overlapped by my fixed header.

[andrewdeandrade]

Hey @DoHahn,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[fat]

it's probably initializing before your content is loaded – call reset on it after your content(images) are finished loaded

[garrettpatterson]

Realy. not. helpful.

On Thu, Feb 7, 2013 at 8:59 PM, fat-kun [email protected] wrote:

it's probably initializing before your content is loaded – call reset on
it after your content(images) are finished loaded

—
Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/5049#issuecomment-13277075.

[jwebcat]

Agreed what a lame way to close the issue.

[martyglaubitz]

this still affects me - why is this issue closed ?!

[cvrebert]

If this problem is still relevant to v3.0.1, please file a new issue with a JSBin/jsFiddle example.

[cthiebault]

The problem is still relevent with 3.1.1...

Here is an example with a fixed navbar
http://jsfiddle.net/cthiebault/qk4RL/

[MichaelJCole]

Hey, this is confusing, and I've been working on it and other problems for much of a day. You have to set a click handler to scroll down a bit. Here's what I use for that:

  $(document).ready(function() {
    var contactAjaxOptions, failMessage, goto;
    goto = function(hashTag, speed) {
      var myOffset, myTop;
      if (speed == null) {
        speed = 1000;
      }
      myTop = $(hashaTag).offset().top;
      myOffset = $('#heder.navbar').height();
      $('body,html').animate({
        scrollTop: myTop - myOffset
      }, speed);
      return true;
    };
    if (window.location.hash) {
      setTimeout(function() {
        return goto(window.location.hash, 0);
      }, 500);
    }
    $('.navbar #logo a').click(function(event) {
      $('#nav li').removeClass('active');
      return goto("#Top");
    });
    $('.navbar a[href^="#"], a.action-btn[href^="#"]').click(function(event) {
      if (event.target.hash === void 0) {
        return goto($(event.target).parent()[0].hash);
      } else {
        return goto(event.target.hash);
      }
    });

Note that I've set my body tag to have a larger offset than my nav menu.
body(data-spy="scroll", data-target=".navbar", data-offset="100")

So yes, Twitter BS doesn't handle it, and also, it doesn't work. Not an awesome design. The first part of the code is to handle incoming hashes on document load.

[ejooo]

I'm having this issue with bs3. Any body there to help me?

[drjorgepolanco]

I am having the same issue too, even if I update the offset default in the bootstrap.js, still doesn't do anything. Also tried adding data-offset in the body tag. Nothing.

[Samjin]

Sam issue here. any updates?

[tomsabin]

Same issue here, this issue shouldn't be closed.

[rpvilela]

In my case the data-offset works like a charm when scrolling, but it doesn't work when I click in my anchors. I solved my problem creating a click handler for my anchors that applies the offset that I want.

$('#main-menu a').not('first').on( 'click', function(){
var offset = 95;
$('body').animate( {
scrollTop: $( $(this).attr('href') ).offset().top - offset + 'px'
}, 250);
});

Just to share a possible solution.

[imneerajgusain]

Just add ".scrollSmooth" class to your clickabel anchors...

$("a.scrollSmooth").on('click', function(event) {
var fromTop = 60;
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - fromTop;
}, 800, function(){
window.location.hash = hash;
});
}
});

[grrseguin]

My solution to handle anchor on the same page and the others pages (with the slim jQuery build):

(function() {
  var offset = 68;

  function scroll (hash) {
    var hashOffset = $(hash).position();

    if (hashOffset) {
      $(window).scrollTop(hashOffset.top - offset)
    }
  }

  $('a.scroll').on( 'click', function(event){
    if (window.location.pathname === '/') {
      event.preventDefault();
    }
    scroll(this.hash);
  });

  $(function() {
    scroll(window.location.hash);
  });
})();