У меня есть прокручиваемый div
состоящий из строк. Каждая строка имеет невидимый span
который становится видимым, когда вы нажимаете на строку. Пролет при открытии (правильно) на той же высоте строки.
Однако, если я прокручиваю основной контейнер, поскольку промежутки находятся в фиксированном положении, они больше не будут на одной высоте строки. Поскольку этот вопрос действительно трудно объяснить, здесь JSFiddle я подготовил. Попробуйте щелкнуть строку без прокрутки. Перезагрузите страницу и повторите попытку, но только после прокрутки до нижнего.
position:absolute
- единственное, что я могу сделать, чтобы позволить "всплывать" в строке, но в то же время это то, что прикручивает позиционирование относительно строки. position:relative
должен работать, но диапазон значительно больше, чем строки, а последние используют overflow:hidden
.
Обратите внимание, что пример - быстрая копия сложной структуры, созданной с библиотеками привязки данных: я не могу изменить эту структуру, и jQuery даже не вариант. В идеале мне нужно решить эту проблему только с помощью CSS, но я понятия не имею, как: есть ли альтернатива position:fixed
что работает, если я прокручиваю div?
Попробуйте установить top
с помощью JS в событии click.
$('.row').click(function () {
var pos = $(this).position().top;
$(this).find('span').css({
"display": "block",
"top":pos
});
});
Может захотеть добавить/вычесть из pos
, в зависимости от точного размещения.