vue-use-fixed-header

Release notes

Add pointer listeners to target's ref instead of document to reduce unnecessary overhead.

Release notes

• Remove unnecessary getScrollTop call - #2 - Thanks @bcastlel
• Correct typo in useFixedHeader return type declaration - #3 - Thanks @bcastlel

Release notes

Fix transitionOpacity union type declaration which was missing Ref/ComputedRef - Thanks @bcastlel - #1

Release notes

vue-use-fixed-header is a package that I published on NPM some months ago as I needed something like it for my professional projects. Very soon I realized that it was too bloated and I decided to unpublish it (it had less than 50 weekly downloads).

This mostly because many of the advanced functionalities I had implemented were unnecessary (e.g. scroll speed, scroll restoration) and that I could have achieved a good outcome with a much simpler codebase.

I also wanted to include a streamlined API that will still work the moment View Transitions will be supported by all browsers and everything this package does can be done with CSS.

Install it now:

pnpm add vue-use-fixed-header

Release notes

Added built-in support for prefers-reduced-motion: reduce. Transitions will be automatically disabled.

Release notes

Hiding/showing is now disabled when hovering the header or any of its children and scrolling at the same time.

This allows users to:

• Keep the header visible if hovering it.
• Navigate an eventual dropdown without worrying about the header flying away.

Update now:

pnpm add vue-use-fixed-header@latest

The first release of vue-use-fixed-header is now available on NPM.

Install it now:

pnpm add vue-use-fixed-header