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

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/

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.

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

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

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>

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