Menu
I have used css to make a "sticky header" that is always visible at the top of the page and the other content placed below it. In the header I have some internal links. The problem is that when a link is clicked then the page is scrolled so that the target is positioned at the top of the page - hidden by my sticky header - instead of just below it.
Any suggestions on how to solve this problem?
css:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3.5em;
padding:0;
margin: 0;
}
#container {
width: 100%;
margin: 3.5em 0 0 0;
padding: 0;
overflow:auto;
}
#content {
padding: 0 4em;
margin: 0;
}
html:
<body>
<div id="header">
<div id="content">
<p>
<a href="#xyz">XYZ</a>
</p>
</div> <!--end content-->
</div> <!--end header-->
<div id="container">
<div id="content">
<p>A lot of text.</p>
<a name="xyz"></a>
<p>A lot of text</p>
</div><!--end content-->
</div><!--end container-->
</body>
488
Sticky headers (or persistent headers) are a common pattern for keeping the header of a website or app in the same place on the screen while the user scrolls down the page. A version of this pattern is the partially sticky header, which (re)appears at the top of the page as soon as the user starts scrolling up.
The WP Sticky Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages “sticky” as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky.
At first, it's better to use blocks with id instead of name — it's more standard way.
Then, add class to an anchor and then make it have absolute position + move it with a negative top margin equal to the header's height.
Look at this fiddle: http://jsfiddle.net/kizu/gfXJJ/
Or, alternatively, for browsers that support pseudo-elements, you can add one with the desired height and compensate it's height by negative top margin, so it would amount as the start of the block to which you'd make a link. Doing so you can add ids to already existent elements rather than creating extra ones.
Here is a version with pseudo-element: http://jsfiddle.net/kizu/gfXJJ/2/
Or you can add top padding and negative margin to an element with id itself: http://jsfiddle.net/kizu/gfXJJ/2/ — but in that case there can be problems with backgrounds on it, 'cause the block is physically extended at the top.
105
A little bit of javascript (jQuery used here) can do it:
$('#header a').click(function (e) {
e.preventDefault();
var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset();
$('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast');
});
This finds the element with a name attribute that matches the href attribute of the link clicked, and then animates a scroll to that element's position less the height of the header.
http://jsfiddle.net/blineberry/bTa8b/
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
