2

小提琴：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....我应该指定，我很抱歉。不知道该怎么做。

4

4 回答 4

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 */
}
于 2013-03-15T23:09:00.927 回答
0

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

于 2013-03-15T23:19:27.940 回答
0

不要使用固定定位，而是使用 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/

于 2013-03-15T23:28:11.977 回答
0

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

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

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

于 2013-03-15T23:07:04.893 回答