Anyone up for a little challenge?

Hi, this is my first post so please be gentle.

I have a basic vertical menu halfway down the left hand side of a page, with a separate header section above it.

As a user scrolls down the page, the menu of course automatically travels up the browser as usual along with everything else. But when it reaches the top of the browser, I want the menu to stay fixed there and not continue rising.

Obviously, if I use {position:fixed} it just stays there in the middle all the time.

Any ideas how I would be able to do this with CSS, or do I need some javascript?

Thanks.

Try using this one. It's a neat and easily editable little floating menu script.

http://www.dynamicdrive.com/dynamici...staticmenu.htm

Good luck!

Thanks RSoftware, not bad at all. However, in some respects, it's just a fancy version of a {position: fixed}. I'm looking for something a little more flexible, something that will let the menu travel up to the top of the browser as the user scrolls down the page, but then stay fixed once it reaches the top.

position: fixed can do that. But you need to specify where you want the menu to sit.

For example

Code: Select all

#selector {
position: fixed;
top: 20px;
left: 60px
}

This will put the #selector 20px from the top and 60px from the left of the visible screen, relative to the containing element with position: relative (body by default).

Thanks aso186. Sorry to trouble you further, but could you put the whole example please. I'm just starting at CSS and, as my usernane suggests, I do need help!
Can you include the HTML just in case?


Is this what you meant?


body
{
position: relative;
top: 3cm;
}

#selector {
position: fixed;
top: 200px;
left: 60px;
}

Even when I change the body {top} to 5cm say, the #selector still stays in the same fixed position as it did when the body {top} was 2cm.

What am I doing wrong?

Thanks.

Np. You've pretty much got it! cm is not a valid measurement. Stick to %, em or px.

You don't need any styles for body. Just change the #selector values to re-position your element.

Code: Select all

* { /* Resets browser defaults for consistency */
margin: 0;
padding: 0;
border: 0
}

#selector {
position: fixed;
top: 200px; /* Change this value for how far from the top you want it */
left: 60px; /* Change this value for how far from the left you want it */
}

Then in your html, you would set the id of the element you wish to position using

Code: Select all

id="selector"