Search code examples
twitter-bootstrapoffsetscrollspy

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

  • 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.