悬浮导航是一种网页布局，或者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')
}
})
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>New Document </title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="Author" content="笃行天下">
<meta name="Keywords" content="笃行天下">
<meta name="Description" content=" http://hi.baidu.com/duxing">
</head><body>
<input type=button value='左滚' onmouseover="leftRoll()" onmouseout="stopRoll()">
<marquee id="dodoRoll" width="30%">笃行天下_笃行天下_笃行天下_笃行天下_笃行天下</marquee>
<input type=button value='右滚' onmouseover="rightRoll()" onmouseout="stopRoll()"></body>
</html>
<script language="JavaScript">
<!--
document.getElementById("dodoRoll").stop()
function leftRoll()
{
document.getElementById("dodoRoll").direction="left"
document.getElementById("dodoRoll").start()
} function rightRoll()
{
document.getElementById("dodoRoll").direction="right"
document.getElementById("dodoRoll").start()
} function stopRoll()
{
document.getElementById("dodoRoll").stop()
}
//-->
</script>
$(window).scroll(function(){if($(window).scrollTop()<1000){
$("确认的类名").hide()
}else{
$("确认的类名").show()
}
})
