CODEWITHSUNDEEP
javascriptcssscrollcss-position
Flickdraw
Flickdraw

Reputation: 683

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

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?

Upvotes: 11

Views: 20952

Answers (3)

ADJenks
ADJenks

Reputation: 3424

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.

Upvotes: 3

Willem Mulder
Willem Mulder

Reputation: 13994

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

Upvotes: 18

Marijn van Vliet
Marijn van Vliet

Reputation: 5399

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.

Upvotes: -2

Related Questions