0

这可能会更好地解释我的问题：

我需要将一个子 div 放置在另一个之上，以便最后一个子 div 仅显示在边缘周围，但是两个子 div 需要一起滚动并保持第一个子 div 的背景静态。这个台面认为视口将是第一个孩子，但第一个和第二个孩子的内容必须在容器内滚动，以便它们可以一起滚动。第一个孩子是视口。

我有以下 HTML 结构：

<div class="container">
    <div class="text">
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
    </div>
    <div class="bars">
        <div class="a"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="b"></div>
        <div class="a"></div>
    </div>
</div>

bars延伸到页面的宽度，并且divtext覆盖在它们之上，并在其周围留有边距。我定位每个barsdiv 以便它们与视觉上对应的row.

textdiv 被定位为每边的x像素，因此它周围有一个边距。这样，您可以看到bars它下面的末端。

标记很简单，但我无法弄清楚这个 CSS...

text是绝对定位的，因此它可以延伸到带有边距的页面边界。如果其中的内容保持在边界内，这很好，但在这种情况下不是。

这一切都很难解释，但基本上，这就是问题所在：我设置container为overflow:scroll因为我需要bars使用rows. 由于text有一个背景图像，并且被定位以便您可以看到rows它下方的末端，因此它必须是position:absolute. 但是，当内容超出text. I can't add the background image to容器栏的边界时，这because it would cover the ends of the不起作用。

那有意义吗？不？这是一个 jsFiddle：http: //jsfiddle.net/charlescarver/BskaP/2/

它仍然没有意义吗？这是一张图片：

在此处输入图像描述

有任何想法吗？问我一些问题，以便我能更好地解释这一点。

4

3 回答 3

1

你不需要太多的CSS——例如.container。如果我理解正确（而且我不是 100% 确定我理解），您希望 .text div 上的图像保持固定，而页面的其余部分 - 条形图和文本滚动。

您不能将图像放在文本 div 上，因为它会滚动；相反，我建议将图像放在每个 .row 上position: fixed，并使用apadding-bottom:20px代替边距，以便所有行后面似乎都有一个图像，并且效果是连续的。这会给你我认为你追求的效果

http://jsfiddle.net/BskaP/5/

于 2013-03-12T02:15:12.217 回答
0

您可以使用 jQuery 的scrollTop()函数来获取基于滚动的元素位置。再加上一个scroll()事件，你应该能够整理出一些东西。

因此，在您的scroll事件中添加一些内容，以将行和文本的位置偏移scrollTop().

scrollTop()：http ://api.jquery.com/scrollTop/

scroll事件：http ://api.jquery.com/scroll/

我最初的想法是通过将rowsandtext元素组合在一起来避免使用 JavaScript，并伪造文本后面的行......但鉴于您的具体情况，我无法想出任何东西......

于 2013-03-12T01:12:33.453 回答
-1

你应该添加overflow:auto到row. 这是一个证明它有效的 jsfiddle：http: //jsfiddle.net/BskaP/3/ 我在其中添加了一个额外的长行作为示例。

我不知道这是否是你想要的，但我认为它是。

于 2013-03-12T01:16:58.440 回答