css - 允许 Fixed DIV 继续水平移动

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>

最终，当您向右滚动以查看更多内容 div 时，#bottomfadebar div 会继续停留在左下角。我正在尝试弄清楚如何让 bottomfadebar DIV 滚动到屏幕左侧，但仍像当前一样固定在窗口底部。

------编辑!!!

好吧，我有点搞砸了，因为我认为这很容易解释，但后来我意识到绝对因素会进来。它实际上应该位于居中的 NAV div 中。

http://jsfiddle.net/u5GuG/4/

它确实需要坚持在“容器”区域内的绝对左:0....我应该指定，我道歉。不确定该怎么做。

Answer 1

如果你不介意的话，我会为此使用一些 jQuery ;)

$(window).scroll(function() {
    $("#bottomfadebar").css("left", (-1 * $(window).scrollLeft()) + "px");
});

fiddle :http://jsfiddle.net/inti/Gqpmf/

更新:现在我想我明白了，您希望#bottomfadebar 在您滚动页面时沿着屏幕底部滚动。

$(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/

更新 2: 我想我还是不明白，但如果你想让它固定在 [bottom,center] 屏幕位置，那么这个 css是一个去:

#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/

更新 3: 真的是我最后的猜测。如果您希望一个元素绝对定位在另一个元素内并相对于它，您必须将容器元素的位置设置为相对(或绝对)。

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