transparentBar（透明标题栏）

当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。

透明标题栏组件比较简单，只需要在header组件上添加.mui-bar-transparent类即可，如下为示例代码

  1. <header class="mui-bar mui-bar-nav mui-bar-transparent">
  2.     <h1 class="mui-title">标题</h1>
  3. </header>

如果需要个性化定制可通过data-*属性或者jsAPIDIY

DOM API作用JS API
data-top距离顶部高度(滚动到该位置即触发){top:0}
data-offset滚动透明距离{offset:150}
data-duration过渡时间  ms{duration:16}
data-scrollby监听区域滚动容器  (*mui 3.5版本+支持) 默认window默认监听原生滚动,
如监听mui scroll控件滚动,则: document.querySelector(‘.mui-scroll-wrapper’)		{scrollby:DOM}

DOM API 使用示例:

  1. <header class="mui-bar mui-bar-nav mui-bar-transparent" data-top='0' data-offset='150' data-duration='16' data-scrollby=".mui-scroll-wrapper">
  2.     <h1 class="mui-title">标题</h1>
  3. </header>

JS API 使用示例:

  1. mui('.mui-bar-transparent').transparent({
  2.     top: 0,
  3.     offset: 150,
  4.     duration: 16,
  5.     scrollby: document.querySelector('.mui-scroll-wrapper')
  6. })

扩展阅读

问答社区参考示例：原生版本透明渐变导航条使用教程

代码块激活字符:

mtransparent