允许 Fixed DIV 继续水平移动

Question

小提琴：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");
});

小提琴：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");
});

小提琴：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 */
}

小提琴：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 */
}

Answer 2

我修改了你 Fiddle 中的代码。

我将 bottomfadebar 移动到内容内部，将内容高度更改为 100%，并将 bottomfadebar 更改为绝对高度

http://jsfiddle.net/EzuTT/1/ - 这就是你要找的吗？

Answer 3

只需将底部淡入淡出位置切换为“绝对”。由于您已经设置了 'bottom:0' ，因此它将粘在页面底部。当您水平滚动时它不会保持可见，因为绝对定位的元素将默认为“left：0”，除非您另有指定（除非在旧版本的 IE（我认为是 7 及以下）中您可能需要声明“left：0” ;' 来避免奇怪的渲染。

Answer 4

不要使用固定定位，而是使用 absolute 并将 left 和 bottom 属性设置为 0。 这会将 div 定位在页面的左下角，而不是浏览器视口的左下角。

#bottomfadebar {
position:absolute;
z-index: 2; 
left: 0;
bottom: 0;
width:267px;
height:84px;
    background-color:#666;
}

小提琴在这里：http://jsfiddle.net/u5GuG/3/