SwAffix
Фиксирует слот при прокрутке до нижней границы boundary или, если селектор не задан, до конца страницы. Алгоритм бокового меню.
Свойства / Properties
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
class | String | `` | CSS-класс обёртки. |
offset | Number | 0 | Отступ сверху viewport (px), P в listing.js. |
offsetBottom | Number | 0 | Зазор до границы boundary (px); линия фиксации = edge − offsetBottom. |
boundary | String | `` | CSS-селектор границы; без него — конец страницы. |
boundaryEdge | String | bottom | top | bottom — к какой границе boundary привязка (включительно). |
Пример
Два варианта boundary-edge:
<style>
.dev-affix-demos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.dev-affix-demo > h3 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 600; }
.dev-affix-layout { align-items: stretch; }
.dev-affix-layout > p { margin: 0; }
.dev-affix-aside { min-width: 0; align-self: stretch; }
.dev-affix-panel { background: var(--sw-bg-color-page); padding: .75rem 1rem; opacity: .8; }
.dev-affix-panel > p { margin: 0; }
.dev-affix-demo-menu .dev-affix-layout { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 1rem; align-items: stretch; }
.dev-affix-demo-menu .dev-affix-aside { grid-column: 1; grid-row: 1; }
.dev-affix-demo-menu .dev-affix-boundary-b { grid-column: 2; grid-row: 1; display: grid; gap: .75rem; }
.dev-affix-demo-menu .dev-affix-boundary-b > p { margin: 0; line-height: 1.5; color: var(--sw-text-color-secondary); font-size: var(--sw-font-size-small); }
.dev-affix-demo-menu .dev-affix-panel { opacity: 1; }
</style>
<div class="dev-affix-demos">
<div class="dev-affix-demo">
<h3>boundary-edge top</h3>
<p>boundary — <code>.dev-affix-main</code> (нижний блок).</p>
<div class="dev-affix-layout">
<aside class="dev-affix-aside">
<sw-affix :offset="20" 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>
<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>
<div class="dev-affix-main">end of content</div>
</div>
</div>
<div class="dev-affix-demo dev-affix-demo-menu">
<h3>boundary-edge bottom</h3>
<div class="dev-affix-layout">
<div class="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>
</div>
<aside class="dev-affix-aside">
<sw-affix :offset="20" :offset-bottom="20" boundary=".dev-affix-boundary-b">
<div class="dev-affix-panel">
<p>Affix — первая строка.</p>
<p>Affix — вторая строка.</p>
<p>Affix — третья строка.</p>
</div>
</sw-affix>
</aside>
</div>
</div>
</div>