Question

In my rails application I’m trying to build a simple FAQ page that has a sidebar where when you click on a topic, it moves down to that question.

So a piece of my code in the sidebar looks like:

<li><a href="#work">How does it work?</a></li>

And then I have a matching h2 with the id=”work”.

It keeps overshooting when I test it out, I think because it’s showing the content starting at the very top of the page, which is hidden by the navbar in Bootstrap. What’s the best way to remedy this?

Answer 1

Had the same issue. Here’s what I came up with:

// listen for click events originating from elements with href starting with #
$('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
  var $nav

  // make sure navigation hasn't already been prevented
  if ( e && e.isDefaultPrevented() ) return

  // get a reference to the offending navbar
  $nav = $('div.navbar')

  // check if the navbar is fixed
  if ( $nav.css('position') !== "fixed" ) return

  // listen for when the browser performs the scroll
  $(window).one('scroll', function () {
    // scroll the window up by the height of the navbar
    window.scrollBy(0, -$nav.height())
  });

});