Vue 3 and Nuxt 3 compatible sticky block component

Makes block sticky to it's parent block. To see how it works, please, see the demo.

Installation and setup

1. Install component:

If you want to install package from npmjs registry(recommended) use:

npm i vue-sticky-to-parent

yarn add vue-sticky-to-parent

pnpm add vue-sticky-to-parent

If you want to install package from GitHub packages use:

npm install @siibragimov/vue-sticky-to-parent

Note: Don't forget to configure registry for installing packages from GitHub. Use .npmrc file or use command:

npm config set registry https://npm.pkg.github.com/

2. Import CSS.

For Vue 3:

  // in entry point (main.js)
  import '../node_modules/vue-sticky-to-parent/dist/style.css';

For Nuxt 3:

  // nuxt.config.ts
  export default defineNuxtConfig({
    css: ['~/node_modules/vue-sticky-to-parent/dist/style.css'],
  });

Note: If you have problems with import, check the file path and especially the prefix.

3. Define styles for block(Sidebar) container. See the App.vue.

Note: the .container should have full height of the column, component sticks to it and moves "inside" it.

4. Import component in your code:

import { VueStickyToParent } from 'vue-sticky-to-parent'

5. Wrap content you want to be sticky.

Define ref for the parent container and pass it to vue-sticky-to-parent component props.

  const container = ref<HTMLElement>();

Example:

<aside ref="container" class="container">
  <VueStickyToParent :parent="container">
    <div class="sticky">
      <!-- YOUR CONTENT -->
    </div>
  </VueStickyToParent>
</aside>

Contributing

To run in development mode

npm run dev

Use for build component

npm run build

and follow the instruction in console to open the test page.

To generate types you can use:

npm run types