Allowing Fixed DIV to continue to move horizontally - css

Question

Fiddle: http://jsfiddle.net/EzuTT/
CSS
#bottomfadebar {
position:fixed;
z-index: 2;
bottom: 0px;
width:267px;
height:84px;
background-color:#666;
}
#content{
width:2000px;
background-color:#ccc;
}
HTML
<div id="content">
This is all of the data. Theres lots of it. so the user will have to scroll horizontally. the bottom bar should go out of view as you scroll further to the right because there's so much data. the bottom bar should only stay "fixed" to the bottom, not to the left hand corner.
</div>
<div id="bottomfadebar">
THIS SHOULD SCROLL HORIZONALLY AS THE PAGE DOES
</div>
Ultimately, the #bottomfadebar div continues to stick in the bottom-left hand corner as you scroll to the right to see more of the content div. I'm trying to figure out how to allow the bottomfadebar DIV to scroll off to the left of the screen, but still fix at the bottom of the window as it's currently doing.
------EDIT!!!
Ok, so I kinda blew it on this because I thought it would be easily explained but then I realized the absolute factor would come in. It actually should reside inside of a NAV div thats centered.
http://jsfiddle.net/u5GuG/4/
It DOES need to stick to the absolute left:0 inside the "container" area....I should have specified, I apologize. Not sure how to do that.

Answer 1

I would use a little jQuery for that, if you don't mind ;)
$(window).scroll(function() {
$("#bottomfadebar").css("left", (-1 * $(window).scrollLeft()) + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/
Update: now I think I got it, you want the #bottomfadebar to scroll along the bottom of the screen while you scroll the page.
$(window).scroll(function() {
var window_width = $(window).width(),
window_scrollleft = $(window).scrollLeft(),
content_width = $("#content").width(),
bottomfadebar_width = $("#bottomfadebar").width(),
content_path = content_width - window_width,
bottomfadebar_path = window_width - bottomfadebar_width,
bottomfadebar_left = 0;
// Equations:
// content_pos = window_scrollleft / content_path;
// bottomfadebar_pos = bottomfadebar_left / bottomfadebar_path;
// content_pos = bottomfadebar_pos;
bottomfadebar_left = window_scrollleft / content_path * bottomfadebar_path;
$("#bottomfadebar").css("left", bottomfadebar_left + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/2/
Update 2: I think I still donn't get it, but if you want it to stick to the [bottom,center] screen position, then this css is a go:
#object {
position: fixed;
bottom: 0;
left: 50%;
width: 200px;
margin-left: -100px; /* half of the width in negative */
}
Fiddle: http://jsfiddle.net/inti/Gqpmf/3/
Update 3: really my last guess. If you want an item to be absolute positioned inside another element and relative to it, you have to set the container element's position to relative (or absolute).
#container {
position: realtive;
}
#object { /* inside #container */
position: absolute;
left: 0; /* will stick to the left side of #container */
bottom: 0; /* will stick to the bottom side of #container */
}

Answer 2

I modified the code in your Fiddle.
I moved bottomfadebar inside of content, change the height of content to 100% and changed the bottomfadebar to absolute
http://jsfiddle.net/EzuTT/1/ - Is that what you are looking for?

Answer 3

Just switch bottomfadebar position to 'absolute'. As you already have 'bottom:0' set it will stick to the bottom of the page. It will not remain visible when you scroll horizontally as an absolutely positioned element will default to 'left:0' unless you specify otherwise (except in older versions of IE (7 and under I think) where you may need to declare 'left:0;' to avoid odd rendering.

Answer 4

Instead of using fixed positioning, use absolute and set your left and bottom attributes to 0.
This will position the div at the bottom left of the page, instead of the bottom left of the browser viewport.
#bottomfadebar {
position:absolute;
z-index: 2;
left: 0;
bottom: 0;
width:267px;
height:84px;
background-color:#666;
}
Fiddle is here: http://jsfiddle.net/u5GuG/3/