Keep sections in a fixed location

M

msubodh

I have been able to piece together the following code to created a
fixed div so that it stays in place even when scrolling (and does it
smoothly as opposed to other approaches that have jerky transitions.)
I only need this to work on IE 6 so I dont mind if my solution is IE
specific.

The problem I have is with the DOCTYPE. I have to deal with html page
that is autogenerated but I have control over the body. So I can add
the stylesheet that I want later on, but I cannot change the DOCTYPE
(the autogenereated page is actually without any doctype). Wihtout the
doctype, the following code does not work.

Anyone know of any way to dynamically change the doctype or any other
suggestions as to how I can accomplish this? Thank you.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<body>

<style type="text/css">


body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-
y:auto; background:rgb(123,187,221);}

#menu {display:block; top:10px; left:170px; width:130px;
position:fixed; border:1px solid #888; padding:10px; text-
align:center; font-weight:bold; color:#fff;
background:url(grid2.gif);}
* html #menu {position:absolute;}

/*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;}/*]]>*/

</style>


<div>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>

this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>

this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
this is some other text</br>
</div>
<div id = "menu">
This is the menu
this is the second line
</div>

</body>
</html>
 
S

scripts.contact

I have been able to piece together the following code to created a
fixed div so that it stays in place even when scrolling (and does it
smoothly as opposed to other approaches that have jerky transitions.)
I only need this to work on IE 6 so I dont mind if my solution is IE
specific.
Click to expand...

Add a script element using createElement (or innerHTML or
insertAdjacentHTML or ...whatever) and set the text to:

window.onscroll=function(){
dV=document.getElementById("menu")
dV.style.top=+document.documentElement.scrollTop+10
dV.style.left=+document.documentElement.scrollLeft+170
}
 
S

scripts.contact

I have been able to piece together the following code to created a
fixed div so that it stays in place even when scrolling (and does it
smoothly as opposed to other approaches that have jerky transitions.)
I only need this to work on IE 6 so I dont mind if my solution is IE
specific.
Click to expand...


My First Reply + Set the position style attribute of menu div to
absolute.
 
M

msubodh

My First Reply + Set the position style attribute of menu div to
absolute.
Click to expand...

The problem with using javascript is the jerky behavior onScroll (as I
alluded to in my original post). I currently already have it
implemented with the approach you outlined, however I am trying to
avoid the jerky behavior. If you try out the HTML that I posted, you
will notice a really smooth scroll. Thanks for the reply
 
S

scripts.contact

The problem with using javascript is the jerky behavior onScroll (as I
alluded to in my original post). I currently already have it
implemented with the approach you outlined, however I am trying to
avoid the jerky behavior. If you try out the HTML that I posted, you
will notice a really smooth scroll. Thanks for the reply
Click to expand...

I know but you have to use that method. IE6 doesn't support fixed
positioning so the only option is use absolute position and set the
top and left properties on every scroll event.
 
M

msubodh

I know but you have to use that method. IE6 doesn't support fixed
positioning so the only option is use absolute position and set the
top and left properties on every scroll event.
Click to expand...

Well as I showed in my example, (because of two different IE bugs
which seem to work against eachother) you can get IE to do fixed
positioning. The only problem is that it requires the DOCTYPE in
there. If you have a chance please try out the example I posted and
you will see what I am talking about. Thanks for the replies
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Help with code 0
I dont get this. Please help me!! 2
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
I Need Help with making a function that draws in a canvas using location data. 1
Aligned to the left 3
Filename undefined for Blob ? 1

Members online

Total: 28 (members: 1, guests: 27)
Robots: 310

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top