如何讓2 div的滾動同時

對於我的網站設計，我有一個<div class="stuffhere"></div>存儲內容。這些div有2個。第二個是在第一個前面，在z-index:的幫助下，兩個stuffhere標籤中的內容都是重複的，但有時頂層stuffhere中的圖像被替換爲間隔符。如何讓2 div的滾動同時

我可以用圖像來描述此設置的最佳原因。

更新：（新形象！） how my code works http://img854.imageshack.us/img854/2292/portfoliocodemarkup.png how my code renders the page http://img5.imageshack.us/img5/8246/portfolio4.png

通知的凱西網頁設計圖像如何不受到條紋背景，而其他塊。 凱西網頁設計圖片是屏幕截圖中唯一沒有被背景着色的元素。

這是因爲背面的div內部元件與背景帶條紋的着色，而在前面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

來源

2011-08-31 desbest

這可能只是我，但我還是很丟失發生了什麼這裏的問題是什麼..決不很顯然，你要2周獨立的div在同一時間滾動少。但是，作爲這個原因尚不清楚，我不明白爲什麼你想/需要。 – Joonas

是的，你可以同時做2 div的滾動。我認爲它更好地展示一個工作示例或/和一些代碼。然後是那些截圖。我認爲它很難理解你想要做什麼 – meo

我也迷失了 – epoch

這裏是定位在底部的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>

來源

2011-08-31 11:27:52

我希望底部div的位置在頂部div的_same_位置，所以位置是同步的。我怎樣才能做到這一點？ – desbest

我更新了我的答案，以顯示你在找什麼。 –

如何讓2 div的滾動同時

回答

相關問題