Элемент позиции jQuery рядом друг с другом по мыши - с фиксацией прокручиваемого div

Результат нежелателен. Код основан на jquery, как позиционировать один элемент относительно другого Но код работает не так, как ожидалось. Я могу понять, как изменить положение смещения в зависимости от абсолютного позиционирования (например, смещение субстрата заголовка). Но у меня проблемы с позиционированием прокрутки. Как только вы начинаете прокрутку, позиция неверна. Кто-нибудь знает его решение?

Ответы

Ответ 1

Ненавижу отвечать на мои собственные вопросы, но смотрите здесь: рабочее решение с jquery

в основном проблема заключалась в том, что элемент был вставлен в неправильном месте. Смещение каким-то образом не соответствовало правильной странице с полосами прокрутки. Это можно устранить, добавив элемент в родительскую форму (если вы хотите, например, сделать некоторые кнопки видимыми). Или <body>

Он также устраняет проблему с перекрывающимися элементами, которые у меня были. Представьте себе, что у вас есть фиксированный позиционированный элемент E1 и абсолютный позиционированный элемент E2. Одним из них является левое меню, E2 - это контент. Когда вы хотите сделать видимым/показать элемент, когда вы наводите курсор мыши на, например, div в содержимом E2 и хотите, чтобы он перекрывался над левым меню E1, тогда вам нужно убедиться, что div не находится в содержимом, так как кажется, что вы не можете пересекаться с дочерним элементом E2, который установлен фиксированным.

Ответ 2

По какой-то причине значение offset().top изменяется в jQuery при прокрутке документа. Вместо этого просто используйте стандартные свойства 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();
});