Improve Navigation Experience In Vue App With Smart Fixed Headers

The Use Fixed Header component brings some clever UX improvements to fixed headers with minimal effort.

When the user scrolls down the page, the header slides out of view, maximizing browsing space. Upon scrolling back up, the header elegantly slides back into place.

Use Fixed Header automatically handles page load logic, hover states, dropdown menus, return-to-top behavior, and reduced motion accessibility. It works with any scrolling container too.

How to use it:

1. Import and apply the Use Fixed Header component to the header of your app.

<script setup>
  import { ref } from 'vue'
  import { useFixedHeader } from 'vue-use-fixed-header'
  const headerRef = ref(null)
  const { styles } = useFixedHeader(headerRef)
</script>
<template>
  <header class="Header" ref="headerRef" :style="styles">
    <!-- Your Header -->
  </header>
</template>
<style scoped>
/* make it sticky */
.Header {
  position: fixed; /* or sticky */
  top: 0;
}
</style>

2. API.

declare function useFixedHeader(
   target: Ref<HTMLElement | null> | HTMLElement | null
   options?: UseFixedHeaderOptions
): {
   styles: Readonly<ShallowRef<CSSProperties>>
   isEnter: ComputedRef<boolean>
   isLeave: ComputedRef<boolean>
}
interface UseFixedHeaderOptions {
   /**
    * Scrolling container. Matches `document.documentElement` if `null`.
    *
    * @default null
    */
   root: Ref<HTMLElement | null> | HTMLElement | null
   /**
    * Signal without `.value` (ref or computed) to be watched
    * for automatic behavior toggling.
    *
    * @default null
    */
   watch: Ref<T> | ComputedRef<T>
   /**
    * Whether to transition `opacity` propert from 0 to 1
    * and vice versa along with the `transform` property
    *
    * @default false
    */
   transitionOpacity: boolean | Ref<boolean> | ComputedRef<boolean>
}

Preview:

Improve Navigation Experience In Vue App With Smart Fixed Headers

Changelog:

v2.0.3 (02/05/2024)

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

v2.0.2 (01/28/2024)

  • Remove unnecessary getScrollTop call
  • Correct typo in useFixedHeader return type declaration

Download Details:

Author: smastrom

Live Demo: https://vue-use-fixed-header.pages.dev/

Download Link: https://codeload.github.com/smastrom/vue-use-fixed-header/zip/refs/heads/main

Official Website: https://github.com/smastrom/vue-use-fixed-header

Install & Download:

Add Comment