默认 overflow:hidden
悬浮 overflow:scroll
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 400px
height: 200px
border: 1px solid #000
overflow: hidden
}
.box:hover{
overflow: scroll
}
</style>
</head>
<body>
<div class="box">
<span>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
测试测试测试测试<br>
</span>
</div>
</body>
</html>
由于各系统版本的限制，沉浸式状态栏对系统有要求（Android4.4及以上、iOS7.0及以上），如果要兼容各系统版本，需要动态判断当前环境是否支持沉浸式状态栏以及系统状态栏的高度：使用5+API
- 判断当前环境是否支持沉浸式状态栏
plus.navigator.isImmersedStatusbar()
如果当前支持沉浸式状态栏则返回true，否则返回false。
- 获取当前系统状态栏高度
plus.navigator.getStatusbarHeight()
获取系统状态栏高度，Number类型。
其单位是逻辑像素值，即css中可直接使用的像素值，可能存在小数点。
实际用法参考HelloH5应用的“plus/doc.html”：
// 创建加载内容窗口
var topoffset='45px'
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px'
}
// 使用偏移位置创建子窗口
wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'})
通过userAgent判断
5+API需要在plusready事件后才能调用，通常此事件在DOM加载渲染后才会触发，无法再渲染前根据不同的状态来设置css。
为了解决此问题，在支持5+API运行环境的userAgent中特定字段Html5Plus/1.0后添加Immersed标识，如下：
"Html5Plus/1.0 (Immersed/30)"
其中Immersed/后的30表示状态栏的高度，单位为逻辑像素值。
可以使用正则表达式进行获取：
var immersed = 0
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent)
if(ms&&ms.length>=3){ // 当前环境为沉浸式状态栏模式
immersed=parseFloat(ms[2])// 获取状态栏的高度
}
immersed值如果大于0则表示当前环境支持沉浸式状态栏。
获取状态栏高度后，可以使用js动态修改DOM元素的css属性来设置样式，如设置界面头区域的顶部内边距为状态栏的高度（避免系统状态栏与界面头重叠），示例如下：
var t=document.getElementById('header')
t&&t.style.paddingTop=immersed+'px'
具体项目中可根据界面设计，灵活使用immersed值来动态适配各种效果。
完整用法可参考HelloH5应用中的“js/immersed.js”
你这个是导航条、用js实现这个效果没有意义的、因为你点击之后页面就跳转了。还是设置css比较合理。
假设一个链接表
A ->A.HTM
B ->B.HTM
C ->C.HTM
样式表里面设置 a.current{font-weight:bold}
在A页
<a href="A.HTM" calss="current">A</a>
<a href="B.HTM">B</a>
<a href="C.HTM">C</a>
在B页
<a href="A.HTM">A</a>
<a href="B.HTM" calss="current">B</a>
<a href="C.HTM">C</a>
在C页
<a href="A.HTM">A</a>
<a href="B.HTM">B</a>
<a href="C.HTM" calss="current">C</a>
