8

The navbar works as well as the smooth scroll, but I can not change the offset. My nav is 86px but no matter how many px I change it still goes to the same place.

$(document).ready(function () {
     $('body').scrollspy({target: ".navbar", offset: 86});   
     $("#myNavbar a").on('click', function(event) {
        if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;
            $('html, body').animate({
                scrollTop: $(hash).offset().top
                }, 800, function(){
                window.location.hash = hash;
            });
         }
     });
});

I added the info directly to the body tag and still no change. I know that jquery is working as it does scroll smooth and the collapse nav works as well.

<body data-spy="scroll" data-target=".navbar" data-offset="86">

3 Answers 3

15

I don't think offset does what you think it does. I Doesn't determine the 'scroll-to' position. You'll have to do that with padding.

Offset in this context means the distance between the top of the screen and the section you're scrolling to. In other words: all it does is determine at which moment the navbar > a tag changes to an active state.

5
  • OK thank you that makes sense. Is there any other way instead of using padding to adjust where the page ends when you click on a navbar > a tag? Right now I have the container div given the id such as home about etc.
    – JonW
    Jun 12, 2016 at 16:24
  • 1
    The page scrolls to the element with the correspond id, so you could add a hidden dummy element with that id and position it where you want it. Jun 12, 2016 at 16:27
  • If this answered your question, please mark as answered ;) Jun 12, 2016 at 19:10
  • Thank you that answered my question
    – JonW
    Jun 12, 2016 at 23:50
  • @wietse-de-vries jsfiddle link is not working any more
    – Hbirjand
    Sep 2, 2020 at 12:37
3

Yes, offset is only there to determine when your nav link is highlighted. Not to position your screen when clicking on the link. I.e. the scrolling part is up to you. You can use a little JS to do that like this:

var offset = 80;

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

Bootstrap uses offset to resolve spying only, not scrolling. This means that scrolling to the proper place is up to you.

Try this, it works for me: add an event handler for the navigation clicks.

var offset = 86;

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

Found it here:

https://github.com/twitter/bootstrap/issues/3316

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.