Download

The features for <a href="/en/docs/1/appbar#hide">auto-hiding the app bar</a> and <a href="/en/docs/1/bottom_nav#auto-hide">auto-hiding the bottom navigation bar</a> introduced earlier are implemented using this plugin.

Instantiate the plugin:

Calling via custom attributes (requires <a href="/en/docs/1/global#mutation"><code>mdui.mutation()</code></a> for initialization if the component is dynamically generated)

options are the parameters for the plugin, see the parameter list below

No JavaScript code is required using this method. Just add the <code>mdui-headroom="<a href="#option">options</a>"</code> attribute to the element to activate the plugin.

If the parameter value is a number, it means the trigger distance for scrolling up and down is the same.

<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">

<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>

If the component is dynamically generated, <a href="/en/docs/1/global#mutation"><code>mdui.mutation()</code></a> needs to be called for initialization.

It can also be an object specifying trigger distances for scrolling up and down separately. For example, <code>{ down: 10, up: 5 }</code>.

npm

npm install mdui --save

yarn

yarn add mdui