Question

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滚动到屏幕的左边，但仍然固定在窗口的底部，正如它当前所做的那样。

------ EDIT !!!

好吧，所以我有点吹嘘它，因为我认为这很容易解释，但后来我意识到绝对因素会进来。它实际上应该驻留在一个居中的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就是go：

#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：真的是我的最后一次猜测。如果您希望项目绝对位于另一个元素内并且相对于它，则必须将容器元素的位置设置为relative（或绝对）。

#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

我修改了你的小提琴中的代码。

我在内容中移动了bottomfadebar，将内容的高度更改为100％并将bottomfadebar更改为绝对

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

Answer 3

只需将bottomfadebar位置切换为'absolute'即可。因为你已经有了'bottom：0'设置它会坚持到页面的底部。当你水平滚动时它将不会保持可见，因为绝对定位的元素将默认为'left：0'，除非你另有说明（除了旧版本的IE（7和我认为），你可能需要声明'left：0 ;'避免奇怪的渲染。

Answer 4

使用绝对值并将左侧和底部属性设置为0，而不是使用固定定位。这将div放在页面的左下角，而不是浏览器视口的左下角。

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

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

允许固定DIV继续水平移动

4 个答案: