# Sticky

Applies sticky property to the component.

# Most common usage scenario

<template>
  <StoriesWrapper>
    <SfSticky>
      <div
        style="
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          height: 18.75rem;
          background-color: #f2f2f2;
        "
      >
        [#default slot content]
      </div>
    </SfSticky>
  </StoriesWrapper>
</template>
<script>
import { SfSticky } from "@storefront-ui/vue";
import { StoriesWrapper } from "@storefront-ui/vue";
export default {
  components: {
    SfSticky,
    StoriesWrapper,
  },
};
</script>

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

  • .sf-sticky--sticky
  • .sf-sticky--bound

# CSS custom properties (variables)

  • --sticky-position
  • --sticky-top
  • --sticky-bottom

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.