"Fixed" Positioning...

liunx

Guest
Is there anyway to get something to stick to the top of the page, even when you are scrolling, without having to use an Iframe?You can use position:fixed, but I don't think IE supports it yet.

Other than that there are some complex dhtml things you can do to make it work,

<!-- m --><a class="postlink" href="http://www.easynetit.co.uk">http://www.easynetit.co.uk</a><!-- m -->

Is an example of something like that.I have seen some javascripts that keep, for example, a small menu at the top of the page, but these can be very annoying!
I can't work out the script at the moment, but you use the onscroll event handler to call a function which sets the position of the <div> to top:0px; left:0px;You can use a combination of JavaScript and CSS to do this. As Dave said, the CSS position: fixed will be used for browser such as NN7 and Mozilla, and a bit of JavaScript will be used for IE and older browsers.

<!-- m --><a class="postlink" href="http://www.infinitypages.com/research/staticmenu.htmYou">http://www.infinitypages.com/research/staticmenu.htmYou</a><!-- m --> can achieve the "sticking" effect with absolute positioning:

.fixed
{ position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border: none;
width: 100%;
height: 20%;
overflow: hidden;
}

.scrollable
{ position: absolute;
top: 20%;
left: 0px;
margin: 0px;
padding: 0px;
border: none;
width: 100%;
height: 80%;
overflow:auto;
}

However this approach screws up keyboard scrolling in some browsers which can be very annoying if you are used to using up and down keys to go through the page...

IE treats fixed as absolute so I would jsut go with a design that behaves "fixed" in Gecko and Opera ano other compliant browsers and degrades to "absolute" in IE.

Good example of such layout is <!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a><!-- m -->

Still you need to be VERY carefull with using fixed positioning (or absolute positioning with hidden overflow for that matter). Using the above link as an example, if you reduce the height of the window, some links become unaccessible.

Simple scrollable canvas is always a safe solution. If your navigation scrolls out of view it's easy for user to get back to it.Whoo! Thanks a bunch.Okay, different train of thought.

Assuming there is a way, how would you get that same something, which is now in a Iframe, to stick to the top of the page?You would normally put the stuff to stay at the top of your page at the top of your page and put an iframe underneath it for the restAh, right. I figured as much. Thanks for your help, much appreciated.
 
Top