Question

I would like to have vertically but not horizontally fixed div element. Currently, I am using jQuery to update the position top every time scroll occurs, but I don’t want it seeing moving. I would like it to be fixed without moving. Is there a way to do this?

 -----------------
|         |       |
|         |       |
| div A   | div B |
|         |       |
|         |       |
|         |       |
 -----------------

Scrolling down

 -----------------
| div A   |       |
|         |       |
|         | div B |
|         |       |
|         |       |
|         |       |
 -----------------

I would like to be able keep Div B vertically fixed while Div A scrolls down and up. But when I scroll to the right and left, I wand Div A and Div B to move.

I noticed that Twitter uses something similar. Once you click on a tweet, the element on the right that display the tweet detail, is veridically fixed. I am not sure how they are doing it. See the second image, when scrolling down the right panel stays fixed.

Second image:

Answer 1

Twitter uses a css property: position: fixed; which sure is the best way to go.

This does exactly what it says it does, it fixes the position. By using the top, right, bottom and left properties you can set the exact position of your div.

---

Edit 13-12-11 (awesome date!)

The property position: fixed; can not influence a positioning property over one axis only. This means, that you can not scroll left or right, like you want to.

I highly suggest you should either avoid surpassing the screen width, using percentages for your element’s width. You can also just stick to your javascript.

You could however go for the method I suggested at first, but change the left property using a scroll event listener so that when you scroll, the left offset is increased or decreased. Because jQuery’s bad-ass cross-browser support I’d go for jQuery. I think you can do practically the same with the prototype library, but I’m not familiar with that library.

jQuery (worked in google chrome):

var offset = 400; // left offset of the fixed div (without scrolling)

$(document).scroll(function(e) {
    // b is the fixed div
    $('.b').css({
        'left': offset - $(document).scrollLeft()
    });
});

Have a look at the live demo

You might need to change the document object to another object or selector of your choice.