Как сделать несколько плавающих элементов с переменной высотой, используя позицию sticky - PullRequest
Новая
       68

Как сделать несколько плавающих элементов с переменной высотой, используя позицию sticky

0 голосов
/ 23 апреля 2020

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

Для иллюстрации я создал простую html

.rail-elements {
    position: sticky;
}
.indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 32;
    font-family: sans-serif;
}
<html>
    <body style="height: 200vh">
        <div class="rail-elements" style="top: 0px; height: 100px; background: red; z-index: 4"></div>
        <div class="rail-elements" style="top: 0px; height: 150px; background: blue; z-index: 3"></div>
        <div class="rail-elements" style="top: 0px; height: 200px; background: green; z-index: 2"></div>
        <div class="rail-elements" style="top: 0px; height: 250px; background: yellow; z-index: 1"></div>
        <div class="indicator">scroll down</div>
    </body>
</html>

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

Есть ли способ, которым я могу сделать элементы плавающий без покрытия друг друга?

Ниже приводится результат, которого я хочу достичь. 

.rail-elements {
    position: sticky;
    top: 0px;
}
.indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 32;
    font-family: sans-serif;
}
<html>
    <body style="height: 200vh">
        <div class="rail-elements" style="top: 0px; height: 50px; background: red; z-index: 4"></div>
        <div class="rail-elements" style="top: 50px; height: 75px; background: blue; z-index: 3"></div>
        <div class="rail-elements" style="top: 125px; height: 100px; background: green; z-index: 2"></div>
        <div class="rail-elements" style="top: 225px; height: 125px; background: yellow; z-index: 1"></div>
        <div class="indicator">scroll down</div>
    </body>
</html>

Я знаю, я могу узнать высоту каждого элемента после того, как он смонтирован, и я могу использовать его для вычисления вершины для каждого элемента. Это решение хорошо, но для меня это слишком сложно, потому что мне, возможно, придется вносить изменения в 20+ файлов, так как этот компонент передает список элементов на несколько страниц, где они смонтированы. Я получаю событие монтирования на странице, а не на этом компоненте.

Можно ли это сделать с помощью CSS? или любой другой более простой способ? Любая помощь приветствуется заранее!

Редактировать: Некоторые элементы списка могут не быть плавающими, и изменение порядка не допускается.

...