div that stays in same vertical position in viewport when vertically scrolled

**mcpalmer** · 07-30-2006, 02:08 AM

Hi all,

Can anyone help? I'm looking for a bit of code that can keep a div and its content in a fixed vertical position in relation to the top of the browser viewport, so that when you scroll down a page the div will stay in view. I saw this on a site recently but cannot remember where it is. Any help greatly appreciated

**Twey** · 07-30-2006, 02:20 AM

CSS provides position: fixed. Unfortunately, IE doesn't support this, so we have to hack up a similar solution:

Code:

<div style="position: absolute; top: 40%; left: 40%; width: 100px; height: 50px; background-color: #990000; border: 2px solid red;">
Static content
</div>
<div style="width: 100%; height: 100%; overflow: auto;">
The rest of your page content
</div>

**jscheuer1** · 07-30-2006, 05:15 AM

That doesn't seem to work in IE here too well, this seems to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* html {
overflow:hidden;
}
* html body {
width:100%;
height:100%;
overflow:auto;
margin:0;
}
</style>

</head>
<body>
<div style="position: absolute; top: 40%; left: 40%; width: 100px; height: 50px; background-color: #990000; border: 2px solid red;">
Static content
</div>
The rest of your page content<br>
<img  src="http://home.comcast.net/~jscheuer1/side/1st.jpg"  border="0">

</body>
</html>

And, since the styles in the stylesheet will only be used by IE, you could add position:fixed; for other browsers like so:

Code:

<div style="position:fixed!important;position: absolute; top: 40%; left: 40%; width: 100px; height: 50px; background-color: #990000; border: 2px solid red;">

**mcpalmer** · 07-30-2006, 09:14 PM

ok, thanks for this, but its a pain because i have another absolute positioned div i don't want to remain static. How can i free that up while allowing ads to be fixed with ie? Also, what is the best way to override that main stylesheet for ie issues? I was going to do 2 stylesheets for ie and not ie but this would be a pain i think, thanks,

**Twey** · 07-30-2006, 09:48 PM

its a pain because i have another absolute positioned div i don't want to remain static. How can i free that up while allowing ads to be fixed with ie?

Now there's a question.

You could always use an iframe, I guess.

Also, what is the best way to override that main stylesheet for ie issues?

There's no need. The way jscheuer1 has written it takes advantage of a popular IE bug, meaning that the two style blocks he has defined will apply only to IE. You can also use Microsoft's conditional comments:

Code:

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]><link href="ie-hacks.css" rel="stylesheet" type="text/css"><![endif]-->

**jscheuer1** · 07-30-2006, 10:11 PM

OK, it gets a little complicated. Fist add a z-index higher than any other z-index on your page to the fixed division(s). A z-index of 10 is usually fine:

Code:

<div style="position:fixed!important;position: absolute; top: 40%; left: 40%; width: 100px; height: 50px; background-color: #990000; border: 2px solid red;z-index:10;">

Next, create a container division within IE conditionals for all the other content on the page:

Code:

<!--[if gte IE 5.5]>
<div style="position:relative;width:100%;height:100%;overflow:auto;">
<![endif]-->

Have that follow all the fixed content and place its conditional </div> tag just before the </body> tag:

Code:

<!--[if gte IE 5.5]>
</div>
<![endif]-->
</body>

Now you can put normal absolutely positioned content (as well as regular content) within that division and it will behave as expected.

As far as where to put the the IE styles currently in the head, you can put them anywhere you like as long as they are parsed by the IE browser. They will never be used by any other browser anyway.

**mburt** · 07-30-2006, 10:40 PM

This is just another stupid way to do this, and it even looks cheap.

Code:

<html>
<head>
<script language="javascript">
var top = 200
function move() {
test.style.top = document.body.scrollTop + top
}
</script>
</head>
<body onscroll="move()" onload="move()">
<div id="test" style="width:200;height:200;border:1x solid black;position:absolute;left:400">Test</div>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
</body>
</html>

**jscheuer1** · 07-31-2006, 03:07 AM

Originally Posted by mburt

This is just another stupid way to do this, and it even looks cheap.

That will only work if javascript is enabled, document.all is supported and even then, probably will be kind of jerky.

I admit it is simpler to deal with and could be made to work with document.getElementById() as well, thereby becoming more nearly universal, but still jerky (could be worked out) and dependent upon javascript (you're stuck there, nothing will change that).

I felt a little bad about my last response here, as I also wanted to convey the idea that the same effect can be achieved with all styles in the style sheet, and without IE conditional comments. In fact, that there are certain principals involved and that any ordinary content can be rendered along with the fixed content if these principals are followed. Here is a commented version that lays things out a bit more clearly:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fixed Position in IE and Other Browsers - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*Styles for All Browsers*/
body {
margin:0;
padding:0;
}
#abs1 {
position:absolute;
left:60px;
top:70px;
color:white;
background-color:black;
width:auto;
height:auto;
padding:1px 3px;
}
#fix1 {
top:40%;
left:40%;
width:100px;
height:50px;
background-color:#990000;
border:2px solid red;
}
.fixed {
position:fixed;
z-index:10;
}
/*End Styles for All Browsers*/

/*Begin IE Only Styles*/
* html {
overflow:hidden;
}
* html body {
width:100%;
height:100%;
overflow:auto;
}
* html .fixed {
position:absolute;
}
* html #iebodydiv {
position:relative;
width:100%;
height:100%;
overflow:auto;
}
/*End IE Only Styles*/
</style>

</head>
<body><!-- Begin Section for fixed content -->
<div class="fixed" id="fix1">
Fixed Content
</div>
<!-- End Section for fixed content -->
<div id="iebodydiv">
<!-- Begin Section for all other content -->

The rest of your page content<br>
<div id="abs1">Absolute Content</div>
<img src="http://home.comcast.net/~jscheuer1/side/1st.jpg"  border="0" galleryimg="no" alt="">

<!-- End Section for all other content -->
</div>
</body>
</html>

Notes: Most of the styles for all browsers are totally optional. The body selector is required to create uniformity among browsers, if full page margins and/or padding are desired, a separate division for those should wrap all content within the #iebodydiv element. All styles for the .fixed class are required but, individual fixed content can have its own optional styling as shown by the #fix1 styles. The #abs1 styles for the absolutely positioned example are completely optional except, of course, for position:absolute;.

FYI: Any style selector that begins:

Code:

* html

will only be followed by IE.

**mburt** · 07-31-2006, 03:12 AM

That's exactly why I said it was another stupid idea.
1) It's skips
2) Not a cross-browser script
3) Doesn't work in Mozilla

**jscheuer1** · 07-31-2006, 03:39 AM

Originally Posted by mburt

That's exactly why I said it was another stupid idea.
1) It's skips
2) Not a cross-browser script
3) Doesn't work in Mozilla

Then perhaps it would have been the better part of valor to keep it to oneself for the time being.

Thread: div that stays in same vertical position in viewport when vertically scrolled

Thread Tools

Search Thread

div that stays in same vertical position in viewport when vertically scrolled

Bookmarks

Bookmarks

Posting Permissions