Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

Question

I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.

This div must be within a "Position:Relative" Div.

I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.

I have this so far, which is basically just a Fixed Div within a Relative Div.

CSS

#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}

#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{

HTML

<div id="container">
<div id="blue-box"></div>
</div>

I have also created a jsFiddle to help demonstrate the problem.

This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.

If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)

Can anyone help me out?

Tacheometer

Answer 1

With JQuery, use the scrollLeft() property of the document! This would work

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});

See also

http://jsfiddle.net/zhQkq/9/

Good luck!

Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});

Caril

Thanks for the reply, this works great on all the latest browsers! Unfortunately it does not fix the problem on IE8. Is there anyway to get this to work on IE8? – Tacheometer

Ah, good catch. It should be $(windows).scroll(...). Updated my answer! – Caril

I was just about to ask this question myself and I found this in related questions. Is there an implementation sans jQuery I could use? – Honorary

Answer 2

Using vanilla javascript would be something like this:

var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
    bb.style.marginLeft = window.scrollX + 'px';
});

In modern browsers, as of 2020, you should try to use the CSS position:fixed; instead of JavaScript positioning because it is widely supported now.

Cullis

Answer 3

Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2 The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.

Selfeffacement

That does not position the div absolutely within the container div on the horizontal axis. I need to keep the blue box at the same point horizontally within the container. So it will always stay at margin-left:400px; in relation to the container div. So that when the user scrolls horizontally, the blue box will move with the container. – Tacheometer