This is a feature I’ve seen on a couple websites but not sure how to mimic it. I have a page with alot of text that I’m not allowed to split up into many pages so I want t o put links into the sidebar that quickly scrolls to a #header in the text.
I want the div that these links would be in to scroll only until the top of the div hits the top of the browser where it will become fixed so its always in view
How is this done?
There are four basic approaches – each with it’s own set of advantages and disadvantages.
The first is old-school – framesets. Simple to implement, but prevents direct linking and is piss-poor for accessibility.
Second up is Javascript – works great if .js is available, but takes a decent amount of code and not everyone has javascript enabled. (or just selectively enable it using things like the noscript plugin for FF). On the whole I consider this approach a waste of bandwidth.
Third is position:fixed in the CSS. Unfortunately it’s unreliable and unpredictable cross-browser and on the whole, you’re better off skipping it though in RARE cases if proper care is taken, it’s the fastest way of doing it.
Finally there’s “fake fixed” – it’s a bit complicated to implement but works in just about every browser and is a pure HTML/CSS solution, even for browsers that don’t have position:fixed available.
The trick is this:
<body>
<div id="someFixedElement">
This is the element that will behave like it's fixed.
</div>
<div id="scrollWrapper">
Normal content goes inside here, anything inside this div will scroll.<br />
Anything absolute positioned outside this DIV will not scroll.
</div>
</body>
with this CSS:
html, body {
height:100%;
overflow:hidden;
}
#someFixedElement {
position:absolute;
top:50px;
left:50px;
width:100px;
padding:1em;
background:#CCC;
}
#scrollWrapper {
height:100%;
overflow:auto;
}
Setting HTML and BODY to 100% height and overflow:hidden removes the ability for those elements to make scrollbars – by making a wrapping DIV handle the scrolling, anything absolute positioned outside #scrollWrapper will not scroll, only stuff inside #scrollWrapper will.
I have an old demo from a few years ago that shows this in action.
http://battletech.hopto.org/html_tutorials/fixed_element.html
While not as simple as position:fixed, it does work all the way back to IE 5.x – just be warned that this technique has some problems – right positioning for example will overlap the scrollbar… Both this method and position:fixed also can bring Gecko and Webkit based browsers to their knees on performance if you use any CSS3 properties that involve transparencies on your page; basically it makes scrolling painful at best, annoying enough for users to walk away from the page at worst. (hover effects using text-shadow and box-shadow can cause similar issues - amazingly IE9 and Opera actually handle them better!)
Or at least, that’s the four ways I know of handling it – there are likely more out there.
seems to be workin well thanks!
You could also just use the fragment identifier to navigate to the heading in a div that has overflow:auto set.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 {
margin:0;
padding:0;
}
html, body {
height:100%;
margin:0;
padding:0;
}
ul.links {
float:left;
width:180px;
background:#fcf;
margin:0;
padding:10px;
border:2px solid #000;
list-style:none;
margin:10px;
display:inline;
}
ul.links a {
color:#000;
text-decoration:none;
display:block;
padding:5px 0;
}
ul.links a:hover {
background:#f00;
color:#fff
}
.content {
margin:0 50px 0 230px;
border:1px solid #000;
border-top:none;
border-bottom:none;
overflow:auto;
height:100%;
background:#ffc;
}
.inner {
padding:10px;
zoom:1.0
}
p.top {
margin:0 0 2em;
border-bottom:1px solid #000;
padding:0 0 10px;
}
p.last{padding:0 0 800px}
</style>
</head>
<body>
<ul class="links">
<li>
<h1>Scroll test</h1>
</li>
<li><a href="#head1">Go To heading 1</a></li>
<li><a href="#head2">Go To heading 2</a></li>
<li><a href="#head3">Go To heading 3</a></li>
<li><a href="#head4">Go To heading 4</a></li>
<li><a href="#head5">Go To heading 5</a></li>
<li><a href="#head6">Go To heading 6</a></li>
<li><a href="#head7">Go To heading 7</a></li>
<li><a href="#head8">Go To heading 8</a></li>
<li><a href="#head9">Go To heading 9</a></li>
</ul>
<div class="content">
<div class="inner">
<h2 id="head1">Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<h2 id="head2">Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p>Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head3">Heading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head4">Heading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p>Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head5">Heading 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head6">Heading 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio.. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head7">Heading 7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head8">Heading 8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top"><a href="#head1">Back to top</a></p>
<h2 id="head9">Heading 9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ac enim condimentum scelerisque quis at eros. Morbi scelerisque malesuada ante, vel mattis felis ullamcorper ut. Fusce faucibus leo orci. Proin gravida diam mollis erat blandit sit amet egestas risus commodo. Cras eget libero odio. Quisque mattis mattis mi et scelerisque. Quisque malesuada ullamcorper tellus vel convallis. Sed sagittis odio vitae sapien vulputate congue cursus risus sagittis. Aenean congue libero id nibh accumsan molestie nec in est. Donec semper justo at leo posuere id euismod erat laoreet. In non eros non felis mollis fermentum at ac sem. Nulla malesuada rutrum elementum. Aliquam ut purus nibh, pharetra malesuada quam. Quisque at magna quis quam pretium placerat. Proin accumsan neque ac enim adipiscing consectetur. Quisque luctus lectus eget eros tristique vehicula. Sed mollis pharetra metus, sit amet adipiscing velit accumsan vitae. </p>
<p class="top last"><a href="#head1">Back to top</a></p>
</div>
</div>
</body>
</html>
I’m not sure if that’s what you meant though. It’s not position:fixed as such unlike deathshadow’s example.