如何同时制作2 div的滚动条

Question

如何同时制作2 div的滚动条

对于我的网站设计,我有一个<div class="stuffhere"></div>存储内容的地方.这些div中有2个.第二个是在第一个之前,借助于z-index:两个stuffhere标签中的内容也是重复的,但有时顶层中的图像stuffhere被替换为间隔符.

我可以用图像来描述这种设置的最佳原因.

更新:(新图片!) 我的代码如何工作http://img854.imageshack.us/img854/2292/portfoliocodemarkup.png 我的代码如何呈现页面http://img5.imageshack.us/img5/8246/portfolio4. PNG

请注意Casey Web设计图像如何不受条纹背景的影响,而其他块则是.的凯西网页设计图像是其上没有由背景有色的屏幕截图的唯一元件.

这是因为后div中的元素用条纹背景着色,而前div中的元素不是.

背面div的不透明度为0.55,条纹背景.由于前部div没有背景且不透明度为1,因此其内容不受条纹背景的影响,因此它没有着色.是的它确实有色调.我可以用另一张图片说明.

我的投资组合网站着色

在下面的相同代码快照中,再次显示它,您将看到一些图像相互重叠.一个很好的例子是一个叫做work_title_heroesforhire.png和的work_title_heroesforhire-F.png 我的代码如何工作

为什么是这样？

下面是没有F后缀的图像. 在此输入图像描述它受到不透明度的影响,因为它位于后层.

下面是带有F后缀的图像.它不受不透明度的影响,因为它位于前层. 在此输入图像描述

这就是截图中的文字没有条纹背景色调的原因.

现在您了解我的设计是如何工作的,这就是问题所在.当我滚动时,会发生这种情况...... mmy投资组合网站没有同步滚动

如何同时制作2 div的滚动？有没有办法我可以使用javascript同步2 div的滚动？JQuery更可取.

更新您可以查看的工作示例网页

Answer 1

JB-*_*JB- 9

下面是一个将底部div动态定位在顶部div后面的示例,当您滚动顶部div时,底部div会动态滚动.

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script>
            $(document).ready(function(){
                var topdivPos = $("#topdiv").position();
                $("#bottomDiv").css("position","absolute").css("top",topdivPos.top).css("left",topdivPos.left).show();
                $("#topdiv").scroll(function(){
                    $("#bottomDiv").scrollTop($("#topdiv").scrollTop());
                });
            });
        </script>
    </head>
    <body>
        <div id="topdiv" style="width:300; height:100; overflow:auto">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
        </div>
        <div id="bottomDiv" style="display:none;width:300; height:100; overflow:auto;z-index:-100">
            <img src="http://www.pixtual.com/wallpaper/Pixtual-10-3-2008.png"/>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	9526 次
最近记录：	6 年，5 月前