悬浮导航是一种网页布局，或者APP布局方式。导航是网站和 APP 当中必不可少的组成部分，它们引导用户抵达目标，发现内容。
为了让用户能够更加方便地使用导航，许多网站和 APP 选择使用了顶部悬浮导航，无论浏览到哪里，都能轻松使用它跳转到其他地方。虽然有的用户并不喜欢这个一直占据屏幕空间的小控件，但是它确实提供了无与伦比的便捷性。
扩展资料：
悬浮导航基本代码：
//首先获取导航栏距离浏览器顶部的高度
var top = $('.bukacn_center_main').offset().top
//开始监控滚动栏scroll
$(document).scroll(function(){
//获取当前滚动栏scroll的高度并赋值
var scrTop = $(window).scrollTop()
//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮
if(scrTop >(top+10)){
$('.bukacn_center_main').addClass('js_nav')
}else{//否则清空悬浮
$('.bukacn_center_main').removeClass('js_nav')
}
})
进入设置 >系统和更新 >系统导航方式 >更多 或设置 >系统和更新 >系统导航方式 >悬浮导航 （取决于您的机型），开启悬浮导航开关。当出现悬浮导航按钮后，您可以：
拖动悬浮导航到您顺手的位置
点击悬浮导航，返回上一级
长按悬浮导航后松开手指，返回桌面
按住悬浮导航并向左或右滑动，查看后台运行中的任务
不用js就只能用css与伪类了，下面是我之前改了 懒人图库 的一个代码做成的，现在还不知能不能找到了。不过下面的代码我又修改了我以前的代码，已经测试成功了，你试试看（在chrome运行成功）。
这方面的东西可以到懒人图库学习啊。
<head><style type="text/css">
/* 设置table宽度、边框为0、(IE6) 使其居中*/
.nav{margin:0px auto height:30px width:800px}
.nav ul table {width:100%border-collapse:collapseborder:0}
/* 默认隐藏下一级ul列表 */
.nav ul li ul {display:none}
/* 当鼠标经过时显示下一级ul列表 */
.nav ul li:hover ul,
.nav ul li a:hover ul {display:blockwidth:100%}
.nav li a:hover {font-weight:bold}
/* ====================== 以上为关键属性 ====================== */
/* ====================== 以下各位随意发挥 ====================== */
/* 修饰样式一 */
.nav li {float:leftwidth:150pxdisplay:blockfont-size:0}
.nav li a {width:150pxdisplay:blockheight:28px
font-size:16pxtext-align:center line-height:28px color:#555text-decoration:nonebackground:#f7f7f7}
.nav li:hover a,
.nav li a:hover {font-weight:boldcolor:red}
.nav li:hover li {border:0}
.nav li li a,
.nav li:hover li a {_border:0font-weight:normalcolor:#555}
.nav li li a:hover {color:redfont-weight:normal}
</style>
</head>
<div class="fixed">
<div class="nav">
<ul>
<li class="up">
<a href="#">用户信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(11)" >更改用户名和密码</a></li>
<li><a href="../../aspx/user.aspx?req=exit" >退出</a></li>
<li><a href="#"></a></li>
<li><a href="#" id="uname"></a></li>
<li><a href="#" id="upower"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">学生信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(21)">添加学生信息</a></li>
<li><a href="#" onclick="chgpg(22)">查询学生信息</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">公寓信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(31)">添加公寓</a></li>
<li><a href="#" onclick="chgpg(32)">删除/修改公寓楼</a></li>
<li><a href="#" onclick="chgpg(34)">修改宿舍信息</a></li>
<li><a href="#" onclick="chgpg(33)">查看住宿情况</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">公寓分配管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(41)">学生宿舍分配</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
</ul>
</div>
</div>
