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 p

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