fixing menu to screen with limits

[kidreapertronV]

Hello everyone!

I'm not very familiar with javascript, so I'm not even sure that this is possible, but I'll throw it out there anyway.

I've designed a webpage that has a very large amount of content, and I would like a menu to stay fixed to the left of the content so that the user doesn't have to scroll up to navigate the site. I've found many scripts that accomplish this, but I'm wondering if it is possible to constrain its movements within a certain div, so that it never does outside of it.

The test site is here.

In the light gold box on the left, I would like for a fixed menu to stay below the image, and above the footer. With standard fixed positioning, this can't be accomplished.

Any ideas? Is this even possible?

Thanks for any help!

[Bocaj]

With standard fixed positioning, this can't be accomplished.

This is possible with just css (i think), no need for javascript...

Code: Select all

    #parent {
      width: 600px;
      margin: 0 auto;
      padding: 1em;
      border: 1px #555 solid;
      overflow: auto;
    }
    #fixed {
      position: fixed;
      background: #f60;
      color: #fff;
      padding: .25em;
      overflow: hidden;
    }

And then the divs

Code: Select all

    <div id="parent">
      <div id="fixed">Insert fixed content here</div>
      Insert main content here
    </div>

That should work, i've not tested it though also would need a bit of modifying.... i should imagine...

But this is just a pointer in the right direction....

See here

[spinal007]

CSS can keep it fixed on the screen, but not within the gold box.
You will need javascript for that...