Pin to the top of the page
in <div class="mdui-appbar"></div> Add class .mdui-appbar-fixed The app bar can be fixed at the top of the page, not scrolling with the scroll bar。
In order to make the application bar not cover the page content, you need to body Add class to body 添加 padding-top：
.mdui-appbar-with-toolbar：Need to add this category when the app bar contains a toolbar. .mdui-appbar-with-tab：In the app bar Tab This class needs to be added when tabs..mdui-appbar-with-tab-larger：App bar with icons and text at the same time Tab This class needs to be added when tabs.
If there are other elements in the application bar besides the toolbar and the Tab tab, you need to provide body Add appropriate padding-top。
Example 1
Example 2
Example 3
Automatically hide the app bar
in <div class="mdui-appbar"></div> 上添加类 .mdui-appbar-scroll-hide You can hide the application bar when the page is scrolled down, and display the application bar when the page is scrolled up.
If the element is dynamically generated, you need to call mdui.mutation() Initialize.
<body class="mdui-appbar-with-toolbar">
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
<div class="mdui-toolbar">
......
</div>
</div>
</body>
run
Automatically hide the toolbar in the app bar
in <div class="mdui-appbar"></div> Add class .mdui-appbar-scroll-toolbar-hide, In the app bar contains both the toolbar and Tab When tabs, the toolbar is hidden when the page is scrolled down, and the toolbar is displayed when scrolling up.
If the element is dynamically generated, you need to call mdui.mutation() Initialize.
<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
<div class="mdui-toolbar">
......
</div>
<div class="mdui-tab">
......
</div>
</div>
</body>
run
CSS List of class names
| Class name |
effect |
.mdui-appbar |
Define an application bar. |
.mdui-appbar-fixed |
Pin the app bar to the top of the page. |
.mdui-appbar-with-toolbar |
When the app bar contains a toolbar, you need to body Add this class on |
.mdui-appbar-with-tab |
In the app bar Tab Need to be in body Add this class on |
.mdui-appbar-with-tab-larger |
App bar with icons and text at the same time Tab Need to be in body Add this class on |
.mdui-appbar-scroll-hide |
Hide the app bar when scrolling down the page, and show the app bar when scrolling up. |
.mdui-appbar-scroll-toolbar-hide |
In the application bar contains both the toolbar and Tab When tabs, the toolbar is hidden when the page is scrolled down, and the toolbar is displayed when the page is scrolled up. |