Preview

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 7

Section 8

Section 9

Section 10

Section 11

Section 12

Section 13

Section 14

Section 15

Section 16

Section 17

Section 18

Section 19

Section 20

Section 21

Section 22

Section 23

Section 24

Section 25

Code

<script lang="ts">
  import {
    Card,
    getSections,
    ScrollSection,
    themeConfig,
    Window
  } from "@fefade/svelte"

  const { colors } = $derived(themeConfig())
  const sections = $derived(getSections())
  const sectionsData = Array.from({ length: 25 }, (_, index) => ({
    reference: `Section ${index + 1}`
  }))
</script>

<Window style="max-height: 300px; overflow-y: scroll;">
  <ScrollSection
    data={sections}
    style="
        position: sticky;
        margin-top: 0;
        top: -16px;
        z-index: 1;
    margin-bottom: 1rem;
    border-radius: 5px;
        "
  >
    {#each sectionsData as { reference }, i (reference)}
      <Card>
        <ScrollSection.Content
          id={reference}
          style="
          height: 100vh;
          padding: 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          background: {i % 2 ? colors.info : colors.warning};
          "
        >
          <h2>{reference}</h2>
        </ScrollSection.Content>
      </Card>
    {/each}
  </ScrollSection>
</Window>