仿小米官网导航栏滑动效果

最新推荐文章于 2023-07-15 00:20:55 发布

TanJ2014

最新推荐文章于 2023-07-15 00:20:55 发布

阅读量1.7k

点赞数

分类专栏： HTML/CSS/JS

本文链接：https://blog.csdn.net/sinat_36014216/article/details/101429019

版权

HTML/CSS/JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

仿照小米官网导航栏滑动效果，主要是当导航栏上滑出页面后，将其固定在页面上方。

效果查看：https://tanj2014.github.io/javascript/02navbar/index.html

代码下载：https://github.com/TanJ2014/javascript/tree/master/02navbar

更多javascript练手小例子：https://github.com/TanJ2014/javascript

（打开页面后鼠标滑动即可查看效果）

主要是使用了两个一样的导航实现，当第一个导航栏滚动出屏幕，第二个导航栏则出现。

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿小米导航条</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!-- 二号导航条 -->
	<div class="nav-bar" id="fixed">
		<div class="container">
			<h2 class="proj-name">2 小米 MIX6</h2>
			<div class="right">
				<a href="" class="cur">概述</a>
				<span class="separator">|</span>
				<a href="">参数</a>
				<span class="separator">|</span>
				<a href="">图集</a>
				<span class="separator">|</span>
				<a href="">F码通道</a>
				<span class="separator">|</span>
				<a href="">用户评价</a>
				<a href="" class="buy-now">立即购买</a>
			</div>
		</div>
	</div>
		<!-- 一号导航条 -->
	<div class="nav-bar" id="static">
		<div class="container">
			<h2 class="proj-name">1 小米 MIX6</h2>
			<div class="right">
				<a href="" class="cur">概述</a>
				<span class="separator">|</span>
				<a href="">参数</a>
				<span class="separator">|</span>
				<a href="">图集</a>
				<span class="separator">|</span>
				<a href="">F码通道</a>
				<span class="separator">|</span>
				<a href="">用户评价</a>
				<a href="" class="buy-now">立即购买</a>
			</div>
		</div>
	</div>
	<div class="scroll">
		<!-- 滚动 -->
	</div>
	<script src="js/index.js"></script>
</body>
</html>

css:

*{
	padding: 0;
	margin:0;
}
body{
	color: #212121;
	height: 
}
a{
	text-decoration: none;
}
.nav-bar{
	width: 100%;
	margin-top: 140px;
	background: #fff;
	height: 63px;
	border:1px solid rgb(224,224,224); 
	border-right: 0;
	border-left: 0;
}
#fixed{
	margin-top: 0;
	position: fixed;
	top: -65px;
	transition:all .3s linear;
}
#fixed.active{
	top: 0;
}
.nav-bar .container{
	width: 1226px;
	height: 60px;
	background: #fff;
	margin:0 auto;
}
.nav-bar .container .proj-name{
	display: inline-block;
	height: 60px;
	line-height: 60px;
	font-size: 18px;
	font-weight: 400;
}
.nav-bar .container .right{
	display: inline-block;
	float: right;
	height: 30px;
	margin-top: 18px
}
.nav-bar .container .right a:not(.buy-now){
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: #212121;
}
.nav-bar .container .right a:not(.buy-now):hover{
	color: #ff6700!important;
}
.nav-bar .container .right .cur{
	color: #ff6700!important;
}
.nav-bar .container .right .separator{
	color: #e0e0e0;
	font-size: 14px;
	line-height: 21px;
	margin: 0 3.5px;
}
.nav-bar .container .right .buy-now{
	display: inline-block;
	height: 28px;
	line-height: 28px;
	width: 118px;
	font-size: 12px;
	margin-left: 3.5px;
	text-align: center;
	border:1px solid rgb(255,103,0);
	background: #ff6700;
	color: #fff;
}
.nav-bar .container .right .buy-now:hover{
	background: #f25807;
	border-color: #f25807;
	transition: all .3s;
}
.scroll{
	height: 2000px;
}
© 2019 GitHub, Inc.

js:

(function(){
	var fixedNavbar = document.getElementById("fixed");
	var staticNavbar = document.getElementById("static");
	var y = staticNavbar.offsetTop + staticNavbar.offsetHeight;
	var positionY = 0;
	var timer = setInterval(function(){
		positionY +=1;
		if(positionY<=staticNavbar.offsetTop){
			window.scrollTo(0,positionY);
		}else{
			clearInterval(timer);
		}
	},2)
	var show = function(){
		fixedNavbar.classList.add("active");
	}
	var hide = function(){
		fixedNavbar.classList.remove("active");
	}

	window.addEventListener("scroll",function(){
		if(window.scrollY> y){
			show();
		}else{
			hide();
		}
	})
})()