Элемент позиции CSS "фиксированный" внутри прокручивающегося контейнера

Интересно, нашел ли кто-нибудь решение для этого?

Я ищу решение для прикрепления элемента к вершине прокручиваемого контейнера

HTML:

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

все "элементы" имеют position:relative,

контейнер имеет следующий CSS:

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

Я хочу, чтобы заголовок оставался на вершине контейнера, независимо от его положения прокрутки и элементов, прокручиваемых снизу.

CSS пока:

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

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

Ответы

Ответ 1

Я думаю, ваше решение пройдет с помощью position:sticky. Кажется, он похож на position:fixed, но уважает относительное положение его родителя.

К сожалению, это экспериментальная функция и поддерживается только в Chromium. Вы можете увидеть более подробную информацию в этой тестовой странице.

Чистое решение css, которое приходит мне в голову, с небольшим изменением разметки. Вы можете установить контейнер только для "элементов" следующим образом:

<div class="cont_elements">
      <div class="element">......</div>
      .....
</div>

И дайте переполнение этому внутреннему контейнеру. Теперь ваш заголовок находится сверху.

Вот рабочая демонстрация.

Ответ 2

jQuery UI добавил position() метод утилиты только для этой цели, который облегчил бы вашу жизнь.

$( "#someElement" ).position({
    of:  //Element to position against,
    my:  //which position on the element being positioned,
    at:  //which position on the target element eg: horizontal/vertical,
    offset:  // left-top values to the calculated position, eg. "50 50"
});

Определенно помог мне.

Ответ 3

Решением в этом случае было бы вывести заголовок вне элемента прокрутки:

<div class="header">title</div>
<div class="container">
    <div class="element">......</div>
    <div class="element">......</div>
</div>

Хотя вы, вероятно, должны иметь лучшие семантические элементы, если это возможно (просто гадать здесь):

<h3>title</h3>
<ul>
    <li>......</li>
    <li>......</li>
</ul>