Sidebar offset using .affix and a fixed navbar

Question

So I'm working on a website that has a fixed navbar:

http://abnetworksa.rewind9.com/servicios/infraestructura/

Besides the fixed navbar, there's a "sticky" sidebar. This sidebar links are anchors that redirect the user to specific content in the same page.

Everything seems to work properly. However, when clicking one of those sidebar links, the targeted content title is hidden under the fixed navbar. Is there a way I could set up and offset for this sidebar links?

I tried

var offset = 380;

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

But it does not work seems it seems to start doing some weird calculations from bottom to top.

Any help?

Thanks a lot!

Answer 1

The header is not fixed. I see you are using bootstrap so you can use navbar-fixed-top class to make it sticky. You need to change the class on your header tag from navbar-static-top to navbar-fixed-top .

To answer the second part of your question,Since you are using bootstrap in your project this answer https://stackoverflow.com/a/14805098/3070770 will help you.

 $(".sidebar-nav li a").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;
   var heightOfNavigationMenu = $('.navbar').height
   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top - heightOfNavigationMenu
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

Note the variable heightOfNavigationMenu . Also ScrollIntoView is not supported in some of the browsers.