Skip to content

vue-sticky-to-parent 1.0.2

Install from the command line:
Learn more about npm packages
$ npm install @siibragimov/vue-sticky-to-parent@1.0.2
Install via package.json:
"@siibragimov/vue-sticky-to-parent": "1.0.2"

About this version

Vue 3 and Nuxt 3 compatible sticky block component

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

Demo

Installation and setup

1. Install component:

npm i vue-sticky-to-parent
yarn add vue-sticky-to-parent
pnpm add vue-sticky-to-parent

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. 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

Details

Assets

  • vue-sticky-to-parent-1.0.2.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all