Попытка сохранить элемент в центре экрана, но содержится в родительском элементе.

Question

У нас есть скрипт для редактирования определенных файлов.По сути, каждый файл разбит на разделы, и при наведении курсора на раздел появится набор инструментов (просто div с кнопками изображений), которые можно использовать для редактирования этого конкретного раздела.У нас родительские элементы (разделы) установлены как position: relative, а набор инструментов - position:absolute, которые установлены с правой стороны раздела.Все это прекрасно работает, тем более что многие из них довольно малы.

Однако у нас есть много таких разделов, которые могут стать довольно большими, достигая длины двух экранов или даже больше.В этих случаях мы хотели бы, чтобы инструменты сортировались по потоку при прокрутке пользователя, так что, если пользователь смотрит на середину вертикального сечения, кнопки будут также располагаться в середине по вертикали, однако, если вертикальныйцентр экрана пользователя прокручивается за разделом, но пользователь все еще находится над разделом, мы бы хотели, чтобы инструменты оставались в родительском элементе и не могли выскочить.

У нас уже есть скриптперемещать элемент с помощью пользовательской прокрутки, если он выходит за пределы экрана, поэтому я подумал, что могу немного изменить это, чтобы сделать это, но я просто не уверен, как связать элемент с его родителем.

TL; DR: Как мне создать элемент, который пытается быть вертикально центрирован в окне пользователя, но не может оставить его родительский элемент.

Answer 1

Это звучит как ручное позиционирование.Вы можете использовать jquery, чтобы получить размер окна браузера, получить смещение прокрутки родительского элемента и рассчитать верхнюю часть инструментов в соответствии с размером экрана и значением scrolloffset родительского элемента.только это.

Вы также можете просто использовать один набор инструментов для всех разделов и передать родительский элемент в качестве параметра.

С наилучшими пожеланиями

Answer 2

Вот быстрое воплощение, которое я придумал на основе предложения Андреаса

$(window).scroll(function(){
    var a = $(window).scrollTop() + ($(window).height() * .35);
    var b = $("#movedelement");
    var c = $(window).scrollTop() + ($(window).height() * .48);

    if (a < (b.parent().offset().top + 8))
        b.css({position: "absolute", top: "1em" });
    else if (c > (b.parent().offset().top + b.parent().height() - 8))
        b.css({position: "absolute", top: b.parent().height() - 100 });
    else
        b.css({position: "fixed", top: "35%" });
}

Настройте несколько чисел вокруг высоты элемента. Грязный, но работает.

Answer 3

Сохранение его вертикально выровненным, но отображаемое только при наведении секции не поможет?