bootstrap offset scrollspy not working

twitter-bootstrap offset scrollspy
JonW picture JonW · Jun 12, 2016 · Viewed 7.5k times · Source

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

Answer

Wietse de Vries picture Wietse de Vries · Jun 12, 2016

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.

Related questions

Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

I have scoured the Internet far and wide and while I found this stackoverflow post insightful Is it possible to change the position of Bootstrap popovers based on screen width?, it still didn't answer my question, likely due to my …

Read More
Offset columns in Bootstrap

This is the idea of what I want to do: <div class="container-fluid"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-4"></div> <div class="col-sm-4"&…

Read More
Bootstrap 3 using affix to fixing navbar position to top when scrolling

This is driving me nuts... This might be simple by I'm not hitting the nail: please give a hint :-) I'm trying to play with Bootstrap 3 for a new layout for my site. I want the navbar to pin to …

Read More