个人中心
gpt4 book ai didi

jquery - 我怎样才能同时制作2个div的滚动条

转载 作者：太空宇宙 更新时间：2023-11-04 13:56:44 25 4
gpt4 key购买 nike

对于我的网站设计，我有一个 <div class="stuffhere"></div>存储内容的位置。这些 div 有 2 个。第二个在第一个之前，借助z-index:还有stuffhere中的内容标签重复，但有时顶层的图像stuffhere被垫片取代。

我可以用一张图片来最好地描述这种设置的原因。

更新:(新图片!) how my code works how my code renders the page http://img5.imageshack.us/img5/8246/portfolio4.png

请注意 Casey 网页设计图像 如何不受条纹背景的影响，而其他 block 则受到影响。 Casey 网页设计图片 是屏幕截图中唯一没有被背景着色的元素。

这是因为 back div 中的元素带有条纹背景，而 front div 中的元素则没有。

背面 div 的不透明度为 0.55，带有条纹背景。由于前面的 div 没有背景并且不透明度为 1，因此它的内容不受条纹背景的影响，因此没有着色。是的，它确实有色。我可以用另一张图片来说明这一点。

my portfolio site tinted

在下面的相同代码快照中，再次向您展示，您会看到一些图像彼此重叠。一个很好的例子是名为 work_title_heroesforhire.png 的那个。和 work_title_heroesforhire-F.png how my code works

这是为什么？

下面是没有F后缀的图片。 enter image description here它受不透明度的影响，因为它位于底层。

下面是带F后缀的图片。它不受不透明度的影响，因为它位于前层。 enter image description here

这就是为什么屏幕截图中的文本没有条纹背景的原因。

现在您了解我的设计是如何工作的，这就是问题所在。当我滚动时，会发生这种情况...... mmy portfolio site without sync'ed scrolling

如何同时制作 2 个 div 的滚动条？有没有一种方法可以使 2 个 div 的滚动与 javascript 同步？首选 JQuery。

更新 Working example webpage you can look at

最佳答案

这是一个将底部 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>

关于jquery - 我怎样才能同时制作2个div的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7256086/

25 4 0
文章推荐： c++ - OpenGL 自由类型文本，y 偏移到字符的最上边界
文章推荐： css - -无法将 CSS 页面链接到 HTML
文章推荐： java - 缓冲图像不会加载到 JPanel 对象上
文章推荐： javascript - 单击右侧面板 li 时，Jquery 在左侧面板上显示值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com