Search code examples
csshtmlfixedframes

Allowing Fixed DIV to continue to move horizontally

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.

Solution

  • 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?