Как сделать закрепленный список с прикрепленными элементами вверху в HTML? - PullRequest
Новая
       90

Как сделать закрепленный список с прикрепленными элементами вверху в HTML?

0 голосов
/ 05 августа 2020

Я создаю одностраничное веб-приложение, используя Vue / Vuetify. В одном из моих представлений я пытаюсь создать список (v-список) элементов в правой части страницы. Список может быть длиннее, чем высота страницы, поэтому необходима прокрутка. Однако остальная часть страницы не должна прокручиваться.

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

Возможно ли это без пересчета высоты прокручиваемой области в javascript?

Я использую и гибкий бокс, и сетку, но не очень опытен в создании современных HTML.

1 Ответ

1 голос
/ 05 августа 2020

Обязательно используйте position: sticky. Просто убедитесь, что прикрепленный элемент размещен со свойством top CSS (или снизу, слева, справа, в других ситуациях), и очень важно, чтобы прикрепленные элементы были прямыми дочерними элементами прокручиваемого элемента! 

ol {
  height: 200px;
  overflow-y: auto;
  position: relative;
}

li {
  padding: .5em 0;
}

.stickme {
  top: 0;
  position: sticky;
  background: lightgreen;
}
<ol>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li class="stickme">I'm sticky</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
</ol>
...