Affix

Viewport pinning

Without target, Affix listens to the page. Content pins to the viewport top after it reaches offset-top.

Code copied

<template>
  <div class="affix-viewport-demo">
    <p>Scroll the documentation page. This action pins below the page header.</p>
    <s-affix :offset-top="88" @change="handleChange">
      <s-button type="gradient">
        {{ affixed ? 'Pinned to page' : 'Scroll page to pin' }}
      </s-button>
    </s-affix>
    <p>The default target is the browser window. No container target is required.</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const affixed = ref(false)
const handleChange = (value: boolean) => (affixed.value = value)
</script>

<style scoped>
.affix-viewport-demo {
  padding: 8px 0;
}
</style>

Container pinning

Code copied

<template>
  <div ref="panel" class="affix-demo">
    <s-affix :target="getTarget" :offset-top="12" @change="handleChange">
      <s-button type="gradient">{{ affixed ? 'Pinned' : 'Pin me' }}</s-button>
    </s-affix>

    <p v-for="index in 18" :key="index">
      Scroll this panel. The action stays pinned to its top edge.
    </p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const panel = ref<HTMLElement>()
const affixed = ref(false)
const getTarget = () => panel.value || window
const handleChange = (value: boolean) => (affixed.value = value)
</script>

<style scoped>
.affix-demo {
  position: relative;

Bottom

Code copied

<template>
  <div ref="panel" class="affix-demo">
    <p v-for="index in 18" :key="index">
      Scroll this panel. The status stays visible at the lower edge.
    </p>

    <s-affix :target="getTarget" :offset-bottom="12">
      <s-tag type="success" round>Saved changes</s-tag>
    </s-affix>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const panel = ref<HTMLElement>()
const getTarget = () => panel.value || window
</script>

<style scoped>

Custom content

The default slot can pin a toolbar, filter row, status, or any other component.

Code copied

<template>
  <div ref="panel" class="affix-demo">
    <s-affix :target="getTarget" :offset-top="12" :z-index="2">
      <div class="affix-demo__toolbar">
        <strong>Project filters</strong>
        <div>
          <s-tag round>Vue 3</s-tag>
          <s-button size="small">Apply</s-button>
        </div>
      </div>
    </s-affix>

    <p v-for="index in 18" :key="index">
      Default slot accepts any content, including a complete toolbar.
    </p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const panel = ref<HTMLElement>()
const getTarget = () => panel.value || window
</script>

<style scoped>
.affix-demo {
  position: relative;
  height: 260px;
  padding: 12px 20px 20px;
  overflow-y: auto;
  border-radius: 14px;
  background: rgba(var(--sax-theme-bg2), 0.46);