How can I have a vertically fixed div element?

Question

I would like to have a vertical but not horizontally fixed div element. I am currently using jQuery to update the top position every time a scroll occurs, but I do not want it to view the move. I would like this to be fixed without movement. Is there any way to do this?

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

Scroll down

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

I would like to keep Div B vertically fixed, and Div A scroll down and up. But when I scroll left and right, I drop Div A and Div B to move.

I noticed that Twitter uses something similar. After you click on the tweet, the element on the right that displays the details of the tweet is checked reliably. I'm not sure how they do it. See Second Image when scrolling on the right pane remains fixed.

Second image:

Answer 1

Twitter uses the css: position: fixed; property position: fixed; which is undoubtedly the best way.

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

---

Edit 13-12-11 (amazing date!)

Property position: fixed; cannot affect the positioning property on only one axis. This means that you cannot scroll left or right as you want.

I highly recommend that you either avoid exceeding the screen width by using percentages for your element width. You can also just stick with your javascript.

However, you could first use the method that I proposed, but change the left property using the scroll event listener, so that when scrolling, the left offset will increase or decrease. Since jQuery support for cross browsers, I would go for jQuery. I think you can do pretty much the same with the prototype library, but I am not familiar with this library.

jQuery (works 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() }); }); 

Watch a live demo

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

Answer 2

Many want this, but unfortunately pure CSS does not offer a way to accomplish this very simple, very useful task. The only way I found is to give the position of the div: fixed. However, as you have found, this captures the div on the x and y axes.

This is a big flaw in CSS, in my opinion. We really need something like CSS position: fixed-x and position: fixed-y. The only way I found for this is to have a piece of JavaScript code injected into the SetInterval () timeout (I use 10 seconds), which translates the div to the axis that needs to be changed.

In your case (if I read your question correctly) you would change the top: DivB in each SetInterval () dash, moving the DivB down to the position you want in the viewport. Easy to do, and it works, just unnecessary pain.

You may ask correctly, why you (and I) cannot do this manipulation when a scroll event occurs. The answer is that the scroll event does not fire on some versions of IE.

If you can make it dependent on the scroll event cross browser, it will be a huge step forward.

NTN.

Answer 3

This is easy to do with proper markup and CSS. You need a container ( div , section , etc.) to contain your two content areas. In the following example, I use the way that JSFiddle displays the contents of the script, but the method is the same as JSFiddle.

Real-time example.

First, we need the markup:

 <div id="container"> <div id="divA"> <p>This div will scroll.</p> </div> <div id="divB"> <p>This div will not scroll.</p> </div> </div> 

Next, CSS:

 #container { height: 100%; postition: relative; width: 100%; } #divA { background: #ccc; height: 300%; /* So we can see scrolling in action */ left: 0; position: absolute; top: 0; width: 25%; } #divB { background: #c55; height: 100%; position: fixed; right: 0; width: 75%; } 

In this example, I am using the fact that JSFiddle will create a view port of a limited size. Thus, I can indicate all my sizes as a percentage.

Please note that I have set the container position relative to. This is so that I can set the position model divA and divB to “absolute” and “fixed” so that they are positioned according to the field created by the “container”. This is a key part of solving your problem.

Answer 4

use position:fixed as a style and set a fixed width for the div . also set top and left or right in the pixel.