Possible to make page elements that don't scroll with CSS?

HTML & CSS
1

What I want to do is have a div that stays in the same spot on the page even when you scroll. Is this possible to do with just CSS, or do I need javascript? Any help, or even if someone can point me to a tutorial I would greatly appreciate it.

2

Hi,

You can do this with css using position: fixed on the div. It doesnt work in IE but there is a workaround to make it work. It involves giving a rule ( ina conditional comment) to IE that makes all relative and absolute elements appear fixed…so use it with care! See this article for details:

3

Hi,

Stu’s method above works well but means that you can’t have any other absolute or relative elements in the page because they get treated as fixed.

However there is another similar method which will allow other elements to be positioned without becoming fixed and involves removing the scroll mechanism from html and applying it to a 100% outer instead which takes the place of the body. The element to be fixed is then placed outside of this #outer and of course it remains fixed because it is now on the body which has had the scrolbars removed.

Here’s a short demo with a fixed element at the bottom of the screen.


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Fixed back to top</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style type="text/css">
 html,body{margin:0;padding:0}
 #to-top{
 	width:75px;
 	background:#ccc;
 	border:1px solid #000;
 	position:fixed;/* for good browsers */
 	left:0;
 	bottom:0;
 }
 p {margin-left:100px;}
 
 /* ie only styles below */
 /* mac hide \\*/
 * html, * html body{overflow:hidden;height:100%;}
 * html #to-top{position:absolute;}
 * html #outer {height:100%;overflow:auto;position:relative}
 /* end hide*/
 
 </style>
 </head>
 <body>
   <div id="to-top"><a href="#top">To Top ^</a></div>
 <div id="outer"> 
 		<p id="top">Start of Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>Content to scroll : </p>
   <p>End of Content to scroll : </p>
 </div>
 </body>
 </html>

However as mentioned above these techniques are of limited use and they all seem to fail at some stage because of one thing and another. The main issue seems to be loss of scrollbars when content is too wide. So test and use with care :slight_smile:

(IE7 now supports position fixed so you could just use position fixed for ie7 and other browsers and just let ie6 scroll. When ie7 is released there will be a large take up because it will be on automatic update and soon will be the no.1 IE browser.)

4

That’s works great, thanks for the help.

5