Menu
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?
558
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())
});
});
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 compensate 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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
