Header Auto Hide

Usage

1. Import `header-auto-hide` module

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

2. Add component to the page

<body>

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

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

  <!-- page content -->

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

</body>

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.29/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"
     z-context="header-auto-hide"
     :header=" 'header-field' "
     :footer=" 'footer-field' ">

  <header #header-field> ... </header>
  
  <!-- page content -->

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

</body>

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.

Events

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

Scripting

Get a reference to the component instance:

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

Methods

// shows header/footer
headerAutoHide.show();
// hides header/footer
headerAutoHide.hide();
// gets a reference to the Scroll Helper component
const scrollHelper = headerAutoHide.scroll();

Controllers

Components

Support this work