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.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"
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();
arrow_left  Previous
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits