跟随导航，导航定位，导航如何一直漂浮在上方

程序员文章站 2022-07-13 15:59:12

...

跟随导航滚动导航定位导航
实现的效果是当滚动条滑到一定距离时，应该消失的导航出现，并一直固定在顶部，或者某一位置，可通过位置调整

下边是一个Demo，每行注释都非常清晰，可以全部复制到一个页面进行浏览，只需要加一个jquery.min.js

原理在最下方

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跟随导航</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		/*导航块居中*/
		.con_top{
			width: 1024px;
			height: 70px;
			margin: 0 auto;
		}
		/*标题原样式*/
		.con_top h1{
			font-size: 20px;
			font-weight: bold;
			color: #fff;
			line-height: 70px;
		}
		/*最大的滚动块的原样式*/
		.navBack{
			width: 100%;
		    position: fixed;
		    top: 0px;
		    z-index: 1;
		}
		/*滚动>100px，最大的滚动块改变成的样式*/
		.nav {
			border-bottom: 1px solid #eee;
		    background: rgba(255,255,255,1);
		    transition: background 0.5s ease-in-out 0s,border-bottom 0.5s ease-in-out 0s;
		}
		/*滚动>100px的时候去除此边框样式，滚动<100时候添加此样式*/
		.navgo{
			border-bottom: none;
		    background: rgba(255,255,255,0);
		    transition: background 0.5s ease-in-out 0s;
		}

	</style>
</head>
<body style="background: pink; height: 10000px;">
	<div class="navBack"> <!-- 这是最大的包含导航的滚动块 -->
		<div class="con_top">
			<h1 id="nav_title">我是一个跟随导航</h1>
		</div>
	</div>
	<script type="text/javascript">
		menu_top();
		function menu_top(){
			var navBack=$(".navBack"); //得到导航对象
			var nav_title=$("#nav_title"); //得到导航题目 为变色试用
			var win=$(window); //得到窗口对象
			var sc=$(document);//得到document文档对象。
			// 判断页面滚动了多少  数值只要稍稍大于导航的高度即可，
			win.scroll(function(){
			  if(sc.scrollTop()>=100){
			    navBack.addClass("nav");  // 背景变色加边框
			   	navBack.removeClass("navgo");  // 最大块加边框
			    nav_title.css('color','#666');  // 标题变色
			  }else if (sc.scrollTop()<100) {
			   navBack.removeClass("nav");  // 背景变色去边框
			   navBack.addClass("navgo");  // 最大块去除边框
			   nav_title.css('color','#fff');  // 标题变色
			  }
			})  
		}
	</script>
</body>
</html>

跟随导航原理

一个导航载体，一个导航内容，载体一直固定上方，而内容随滚动条滚动，

js监测滚动条当滚动到一定距离 导航内容消失 时，改变导航内容的样式，让其显现。

js监测滚动条当滚动条小于一定距离是，使载体不可见，内容样式还原就可以了