CODEWITHSUNDEEP
twitter-bootstrapoffsetscrollspy
JonW
JonW

Reputation: 145

bootstrap offset scrollspy not working

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">

Upvotes: 8

Views: 11298

Answers (3)

Wietse de Vries
Wietse de Vries

Reputation: 673

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.

Upvotes: 15

Arham Chowdhry
Arham Chowdhry

Reputation: 752

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

Upvotes: 0

Josh
Josh

Reputation: 2468

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

Upvotes: 3

Related Questions