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?
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?
Share Improve this question edited Aug 4, 2012 at 1:12 merv 77.3k17 gold badges215 silver badges278 bronze badges asked Jul 16, 2012 at 23:04 sacshusacshu 40710 silver badges20 bronze badges2 Answers
Reset to default 5Had 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())
});
});
I fixed this purely with CSS/HTML markup - this may or may not work for you depending on your structure.
Firstly, every element I am referencing in my Navbar is a div, as my page is broken into sections and each dav has the class container so the page structure is:
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
<li><a href="#five">five</a></li>
</ul>
</div>
</div>
</div>
<div class="container" id="one">
<h1>One</h1>
</div>
...
<div class="container" id="five">
<h1>Five</h1>
</div>
The documentation suggests you pad the body by at least 40px to pensate for the navbar and this is fine - but it will only push the content down when the page is at the top. I found, as you did, that any links from the static navbar to on-page # anchors are too high up the page.
My solution was to pad the top of each anchored element, and so I added to following CSS to my page CSS (load between the standard bootstrap and responsive stylesheets):
.container {
padding-top: 60px;
}
This obviously adds space between each section on my page, but this is actually useful in my layout.
It's worth bearing in mind that because the top section also has this padding, there is no need to apply padding to the top of the <body> tag.