全屏显示下自定义移动端导航

README: English | 中文

插件化导航组件，只需要引入的navigator.css和navigator.js就能在页面顶部添加一个导航栏，插件实现了导航的自定义，还附加了很多新功能。

查看 demo

git clone https://github.com/Andyliwr/h5-navigator.git 在页面中引入dist/navigator.min.css和dist/navigator.min.js

请注意在引入zepto之后引入dist/navigator.min.js

$(document).ready(function () { $.fn.H5Navigator.init({   openDebug: false,   Title: document.title,   titleAlign: 'center',   backgroundColor: '#e83031',   autoHideNavArea: '.header-img',   showRightNav: true,   rightNavIcon: 'share',   clickLeftNavCallback: null,   clickRightNavCallback: null, isExitWhenNoPageBack: true, iosScrollBottomCallback: null }); }); 参数说明 openDebug: 是否开启调试模式，默认 false title: 自定义页面标题，默认值是document.title titleAlign: 标题齐方式，默认为center backgroundColor: 导航背景颜色，默认为#e83031 autoHideNavArea: 需要自动隐藏导航的区域的选择器，导航在滑过该区域的时候透明度会从 0 逐渐变到 1 showRightNav: 是否展示导航右边的按钮，默认为false rightNavIcon: 导航右边的按钮iconfont图标名称 clickLeftNavCallback: 点击导航左边按钮的回调, 默认为null，为空则会执行默认函数history.back() clickRightNavCallback: 点击导航右边按钮的回调 isExitWhenNoPageBack: 当页面已经返回到顶部(history.length = 1)时，是否退出全屏 webview iosScrollBottomCallback: 滑动到底部回调函数，IOS 使用原来的底部统计不生效，需要自定义 自定义方法

$.fn.H5Navigator.changeOptions修改当前导航的属性

使用方法如下

$.fn.H5Navigator.changeOptions({ title: 'xxx', // 导航标题 clickLeftNavCallback: () => {} // 导航左边按钮的点击事件 }) 更新历史 2018/09/04 修改导航图标以及字体的大小，与原生导航保持一致 修复移动端双击导航标题未能返回顶部的 bug 修复 IOS 下滑动的时候导航透明度修改不及时的 bug 修复 IOS 键盘弹出时导航拦 fixed 定位失效的 bug 修复 IOS 下返回页面顶层(history.length 等于 1)的时候继续点击返回无反应的 bug

PS: 导航栏在 ios 下加入了 iscoll 插件，强制将 body 的宽度设置成了 100%，所以原来的底部统计方法不能使用了，请使用插件新增的 iosScrollBottomCallback 回调函数