SwAffix
Фиксирует слот при прокрутке до нижней границы boundary или, если селектор не задан, до конца страницы. Алгоритм бокового меню.
Свойства / Properties
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
class | String | `` | CSS-класс обёртки. |
offset | Number | 0 | Отступ сверху viewport / target (px), P в listing.js. |
offsetBottom | Number | 0 | Зазор до границы boundary (px); линия фиксации = edge − offsetBottom. |
boundary | String | `` | CSS-селектор границы; без него — конец страницы. |
boundaryEdge | String | bottom | top | bottom — к какой границе boundary привязка (включительно). |
target | String / HTMLElement | `` | Контейнер прокрутки; без него — window. |
Пример
Прокрутите блоки — слот липнет, затем останавливается у boundary.
<style>
.dev-affix-demos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
align-items: start; }
.dev-affix-demo > h3 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; }
.dev-affix-scroll { height: 16rem; overflow: auto; padding: .75rem;
border: 1px solid var(--sw-border-color); }
.dev-affix-layout { display: grid; gap: 1rem; align-items: start;
grid-template-columns: minmax(110px, 140px) 1fr; }
.dev-affix-aside { min-width: 0; }
.dev-affix-col { display: grid; gap: .75rem; }
.dev-affix-col > p { margin: 0; line-height: 1.5;
color: var(--sw-text-color-secondary); font-size: var(--sw-font-size-small); }
.dev-affix-panel { background: var(--sw-bg-color-page); padding: .75rem 1rem; }
.dev-affix-panel > p { margin: 0; }
</style>
<div class="dev-affix-demos">
<div class="dev-affix-demo">
<h3>boundary-edge top</h3>
<div id="sw-affix-demo-top" class="dev-affix-scroll">
<div class="dev-affix-layout">
<aside class="dev-affix-aside">
<sw-affix target="#sw-affix-demo-top" :offset="12"
boundary=".dev-affix-main" boundary-edge="top">
<div class="dev-affix-panel">
<p>Affix — первая строка.</p>
<p>Affix — вторая строка.</p>
<p>Affix — третья строка.</p>
</div>
</sw-affix>
</aside>
<div class="dev-affix-col">
<p>Контент — строка 1.</p>
<p>Контент — строка 2.</p>
<p>Контент — строка 3.</p>
<p>Контент — строка 4.</p>
<p>Контент — строка 5.</p>
<p>Контент — строка 6.</p>
<p>Контент — строка 7.</p>
<p>Контент — строка 8.</p>
<p>Контент — строка 9.</p>
<p>Контент — строка 10.</p>
<p>Контент — строка 11.</p>
<p>Контент — строка 12.</p>
<div class="dev-affix-main">end of content</div>
</div>
</div>
</div>
</div>
<div class="dev-affix-demo">
<h3>boundary-edge bottom</h3>
<div id="sw-affix-demo-bottom" class="dev-affix-scroll">
<div class="dev-affix-layout">
<aside class="dev-affix-aside">
<sw-affix target="#sw-affix-demo-bottom" :offset="12"
:offset-bottom="12" boundary=".dev-affix-boundary-b">
<div class="dev-affix-panel">
<p>Affix — первая строка.</p>
<p>Affix — вторая строка.</p>
<p>Affix — третья строка.</p>
</div>
</sw-affix>
</aside>
<div class="dev-affix-col dev-affix-boundary-b">
<p>Контент — строка 1.</p>
<p>Контент — строка 2.</p>
<p>Контент — строка 3.</p>
<p>Контент — строка 4.</p>
<p>Контент — строка 5.</p>
<p>Контент — строка 6.</p>
<p>Контент — строка 7.</p>
<p>Контент — строка 8.</p>
<p>Контент — строка 9.</p>
<p>Контент — строка 10.</p>
<p>Контент — строка 11.</p>
<p>Контент — строка 12.</p>
</div>
</div>
</div>
</div>
</div>