bootstrap offset scrollspy not working

Asked 12/6, 2016 at 2:1 Answered 3/4, 2020 at 5:56

Solved twitter-bootstrap offset scrollspy

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

Strategy answered 12/6, 2016 at 2:1 Comment(0)

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.

Thymic answered 12/6, 2016 at 15:46 Comment(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. – Strategy 12/6, 2016 at 16:24

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. – Thymic 12/6, 2016 at 16:27

If this answered your question, please mark as answered ;) – Thymic 12/6, 2016 at 19:10

Thank you that answered my question – Strategy 12/6, 2016 at 23:50

@wietse-de-vries jsfiddle link is not working any more – Grantgranta 2/9, 2020 at 12:37

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

Proprietress answered 12/7, 2017 at 14:3 Comment(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

Kyongkyoto answered 3/4, 2020 at 5:56 Comment(0)

Recommended topics

Hot tags