Header Auto Hide


1. Import header-auto-hide module

<script type="module">
import "https://zuixjs.github.io/zkit/lib/1.2/controllers/header-auto-hide.module.js";

2. Add component to the page


<header-auto-hide z-context="header-auto-hide"
:header=" 'header-field' "
:footer=" 'footer-field' ">

<header #header-field> ... </header>

<!-- page content -->

<footer #header-field> ... </footer>


1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.13/js/zuix.min.js"></script>

2. Load the header-auto-hide controller

Add the ctrl z-load attributes to the component with the scrollbar

<body ctrl z-load="https://zuixjs.github.io/zkit/lib/1.2/controllers/header-auto-hide"
:header=" 'header-field' "
:footer=" 'footer-field' ">

<header #header-field> ... </header>

<!-- page content -->

<footer #header-field> ... </footer>


Option attributes

  • z-context="<context_id>" optional
    identifier name to be used to access this component from JavaScript.
  • :on:<event_name>="<handler>" optional
    set handler function for event <event_name>
  • :header
    field name of the header element.
  • :footer optional
    field name of the footer element.
  • :show-end optional
    show header when scroll hits page's bottom (default: false).
  • :z-index optional
    set the specified z-index to header/footer elements
  • :scroll-host optional
    field name of the element hosting the scrollbar. This value is auto-detected by default.


  • page:scroll (e, data) - occurs when the page is scrolling


Get a reference to the component instance:

zuix.context('header-auto-hide', (ah) => {
// store a global reference for later use
self.headerAutoHide = ah;


// shows header/footer
// hides header/footer
// gets a reference to the Scroll Helper component
const scrollHelper = headerAutoHide.scroll();
arrow_left  Previous
Next arrow_right 
Support this work
zKit components v1.2.1
web enhancing bits