This package provides a Vue.js directive, `v-sticky`, designed to make elements "sticky" within their designated container, mimicking the CSS `position: sticky` behavior. It enables configurable sticky effects through various attributes such as `sticky-offset` (allowing top and bottom breakpoints), `sticky-side` (to specify sticking to the top, bottom, or both), and `sticky-z-index` for layer control. Additionally, it offers an `on-stick` callback function that notifies when an element's sticky state changes. The current version, 0.0.10, indicates it's an early-stage project. While its release cadence isn't explicitly defined, the versioning suggests a more cautious release cycle, with the last known commit in May 2021. A key differentiator is its straightforward, directive-based API for Vue 2 applications, providing a robust solution for contextual sticky elements that can be scoped to a specific `sticky-container` rather than just the viewport.
npm install vue-sticky-directiveVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to globally register and use the `v-sticky` directive on a navigation bar. It shows how to define a `sticky-container`, set `sticky-offset` and `sticky-z-index`, and utilize the `on-stick` callback to react to the element's sticky state changes, applying a class when stuck. This code requires a Vue 2 environment.
For Vue 3, consider using a different sticky library specifically built for Vue 3 or directly utilizing CSS `position: sticky`. Migrating this directive to Vue 3 would require a significant rewrite of its core logic and registration process.
Always explicitly define the scrollable area or the element's intended relative parent with the `sticky-container` attribute. Ensure this container has sufficient height and, if meant to be scrollable, appropriate `overflow` CSS properties (e.g., `overflow: auto`).
Always bind `sticky-offset` to a data property or an object literal containing `top` and/or `bottom` values, using `v-bind` (shorthand `:`), such as `:sticky-offset="myDynamicOffsets"` or `:sticky-offset="{ top: 50, bottom: 0 }"`.Ensure `import Sticky from 'vue-sticky-directive'; Vue.use(Sticky);` is called early in your application's entry point (e.g., `main.js`), or that `directives: { Sticky }` is included in the component options where `v-sticky` is used.Ensure `sticky-offset` is an object with `top` and/or `bottom` properties (e.g., `{ top: 0, bottom: 0 }`) and that it's bound using `v-bind` (shorthand `:`) if it's a dynamic value or expression, like `:sticky-offset="{ top: 50 }"`.Verify that an ancestor element has the `sticky-container` attribute and that this container has a defined height and is scrollable if intended. Check for conflicting `position` CSS properties on parent elements that might interfere with the directive's functionality.