CSS DIV getting out of bounds

I'm trying to limit the scroll in http://www.liftdesignphoto.com/test/ because it gets the lift out of bounds.

Is there a 开发者_运维技巧way to recalculate the position so that it does not get out of bounds? (using % maybe).

Thanks

---

Assuming that the overflow you mentionned happens when it travels lower than level 0, you could, in your javascript, be able to implement a conditional check; if the lift is lower than the allowable minimum height (which you would need to measure yourself), don't animate it any further down (or simply animate if the scroll action event is downwards).

-- This is all relevant if your elevator doesn't have a position:fixed style, which I fear it has. My suggestion would be to switch to absolute positioning and have js code that will always center it to 50% of the screen, unless it hits top and bottom limits, in which case it will not raise any higher or lower than the limits that you set yourself in the code (see above). I would also suggest you use the jquery animate() function, updating the top or bottom attribute of the elevator in order to animate it on a scroll event (which you would need to detect if the scroll is going up or down) so that the movements will be more smooth.

All to say that it's impossible IMO to create position limits on a fixed positioned element as it's set above all other elements (thus not affected by sibling or ancestor position styling).

Hope this helps.

EDIT: another note on why not to use fixed positionning; when resizing the web browser, your life will behave erratically because it uses a fixed top-position (not even percentage-based value), it doesn't make for a very flexible interface.