Semantic-UI, липкий на внешнем контейнере

Question

Semantic-UI, липкий на внешнем контейнере

1

Я пытаюсь получить полноэкранные обертки контейнера фона в сочетании с липким элементом.

Эта диаграмма показывает макет, который я хочу достичь:

И вот ручка, показывающая, как я ее выложил до сих пор: https://codepen.io/othbert/pen/PJMwPm

$('[data-make-sticky-to]').sticky({
  context: $('[data-make-sticky-to]').data('makeStickyTo')
})

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

Чтобы разрешить полноэкранные обертки ширины, но сохраняйте выравниваемый по центру контент, я использую структуру: full-width-wrapper> grid> 2 layout.

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

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

Есть идеи?

osbert 25 окт. 2017, в 17:21

Источник

Теги:

javascript

css

semantic-ui

sticky

1 ответ

Ещё вопросы

osbert · Accepted Answer · 2017-10-28T22-58-00.000Z

Я думал об этом не так.

Чтобы исправить, я установил столбец с липкой в позицию: relative. Затем я добавил еще один содержащий div непосредственно вокруг липкого с положением: абсолютным.

Липкие потоки в абсолютном контейнере, который имеет высоту, установленную семантикой. Позиция задана правильно, поскольку она основана на относительном родительском окружении.

И это все.

Обновлен код: https://codepen.io/othbert/pen/MOWBja

...
<div class="three wide left floated column sticky-relative">
  <div class="sticky-absolute">
    <div class="ui sticky segment" data-make-sticky-to="#sticky-c">

      STICKY CONTENT

    </div>
  </div>
</div>
...

и SCSS...

.sticky {
  &-relative {
    position: relative;
  }
  &-absolute {
    position: absolute;
  }
}