CODEWITHSUNDEEP
csshtmlfixedframes
John Egbert
John Egbert

Reputation: 69

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.

Upvotes: 2

Views: 2636

Answers (4)

aorcsik
aorcsik

Reputation: 15552

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 */
}

Upvotes: 1

user1736703
user1736703

Reputation:

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/

Upvotes: 0

Chris Boon
Chris Boon

Reputation: 1387

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.

Upvotes: 0

doitlikejustin
doitlikejustin

Reputation: 6353

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?

Upvotes: 0

Related Questions