jQuery的定位元素彼此相鄰的鼠標 - 可滾動的div固定

所以我這個 jsFiddle of mouseover together with absolute positioning divs jQuery的定位元素彼此相鄰的鼠標 - 可滾動的div固定

結果是不需要的撥弄。該代碼基於jquery how to position one element relative to another 但代碼沒有按預期工作。我可以根據絕對定位找出如何重新定位偏移量（例如，頭的減去偏移量）。但我遇到的問題是滾動定位。一旦你開始滾動，位置是錯誤的。有人知道它的解決方案嗎？

來源

2011-12-06 Toskan

不想回答我的問題，但在這裏看到： working solution with jquery

基本上問題是元素被插入錯誤的位置。某種程度上的偏移量與滾動條的頁面沒有正確關聯。這可以通過在父窗體上添加元素來解決（例如，如果您想讓某些按鈕可見）。或<body>

它修復了我有重疊元素的問題。試想一下，你有一個固定位置元素E1和一個絕對位置元素E2。一個是左側菜單，E2是內容。當您將鼠標懸停在某個元素上時想要顯示/顯示元素時在E2內容的div，並希望它重疊在左側菜單E1，那麼你需要確保div不在內容中，因爲看起來你不能重疊到定位固定的E2的兄弟中。

來源

2011-12-06 16:07:32 Toskan

我已經更新了您引用的原始問題的答案，並且它現在應該可以處理您的問題了:) – Jacob

由於某些原因，滾動文檔時，jQuery中的offset().top值發生更改。只需使用標準的HTML元素屬性offsetLeft和offsetTop：

工作例如：http://jsfiddle.net/YpcSe/2/

代碼：

$("#m1").mouseover(function(){ 
    $("#o1").css({ "left": this.offsetLeft, "top":this.offsetTop }).show(); 
}) 
.mouseout(function(){ 
    $("#o1").hide(); 
}); 



$("#m2").mouseover(function(){ 
    $("#o2").css({ "left": this.offsetLeft, "top":this.offsetTop }).show(); 
}) 
.mouseout(function(){ 
    $("#o2").hide(); 
});

來源

2011-12-06 13:57:27 maxedison

順便說一句，像這樣的例子總是一個很好的機會來反思何時jQuery實際上是必要的（即使用offsetLeft而不是jQuery的偏移函數）。另一個例子是使用this.className而不是$（this）.attr（'class'）... – maxedison

我必須糾正自己：這是行不通的。簡單的舊的javascript offsetTop函數給我一個完全錯誤的位置，它與一些不同的父元素相關，只要我在一個更復雜的網頁中使用它。 – Toskan

然後請發佈您的代碼，或創建一個小提琴，顯示此。 – maxedison

jQuery的定位元素彼此相鄰的鼠標 - 可滾動的div固定

回答

相關問題