下拉滚动吸顶式导航栏固定导航栏吸附导航栏

时间：2024-04-01 12:58:46

下拉滚动吸顶式导航栏固定导航栏吸附导航栏的设计

1、效果展示

下拉滚动吸顶式导航栏固定导航栏吸附导航栏
如图所示，当滚动至banner图片不可见时，吸顶式导航栏缓慢出现。

2、设计思路

  1. 滚动时获取离顶部的距离
  2. 距顶部距离超过设定值时，修改顶部导航栏样式
  3. 将原有导航栏设置为fixed，吸附顶部
  4. 为了效果美观，可以添加transition过渡效果

3、分步讲解

1）模拟导航栏

如图，先模拟一个这样的导航栏，具体代码如下所示
下拉滚动吸顶式导航栏固定导航栏吸附导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉吸顶导航栏</title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			.main{
				width: 100%;
			}
			.banner{
				width: 100%;
				height: 600px;
				background: url(img/testimonials_bg.jpg);
			}
			.bgh1 {
				color: #FFFFFF;
				padding: 150px 50px;
				font-size: 3em;
				margin: 0px;
			}
			.content{
				width: 100%;
				text-align: center;
				background: #fbfcfc;
				min-height: 1000px;
			}
			header{
				width: 100%;
				height: 100px;
				position: absolute;
				border-bottom: 0.5px solid #999999;
			}
			header nav{
				width: 100%;
			}
			nav ul{
				margin: 0;
				padding: 0;
				list-style: none;
				width: 50%;
				margin-left: 200px;
			}
			nav ul>li{
				float: left;
				color: #FFFFFF;
				height: 100px;
				line-height: 100px;
				vertical-align: middle;
				margin-right: 50px;
				font-size: 20px;
			}
			
		</style>
	</head>
	<body>
		<div class="main">
			<header>
				<nav class="navigation">
					<ul>
						<li>HOME</li>
						<li>ABOUT</li>
						<li>TEAM</li>
						<li>SERVICE</li>
						<li>CONTACT</li>
					</ul>
				</nav>
			</header>
			<div class="banner">
				<h1 class="bgh1"> It's not just about ideas.It's about making ideas happen</h1>
			</div>
			<div class="content">
				<h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1>
				<h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1>
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

2）jquery获取滚动的尺寸，适时添加class

<script type="text/javascript">
			$(window).scroll(function() {
				
				if($(window).scrollTop() > 190) {
					$('.navigation').addClass("sticky");
				} else {
					$('.navigation').removeClass("sticky");
				}
			
			});
		</script>

如上代码，我们在滚动高度大于190时，分别添加了1个样式sticky
sticky的css样式如下

			nav.sticky{
				position: fixed;
				background: #FFFFFF;
				box-shadow: 0 0 10px 1px #000000;
			}
			nav.sticky ul>li{
				color: #000000;
				height: 60px;
				line-height: 60px;
				vertical-align: middle;
				font-size: 16px;
			}

至此，一个普通的下滑吸顶式导航栏就出现了。
但是吸顶导航的出现比较生硬，不像文章效果图那样比较柔和出现，这是因为没有添加transition过渡

3）柔和的过渡效果

我们在下拉滚动时，除了sticky再添加2个样式进行修饰

				if($(window).scrollTop() > 200) {
					$('.navigation').addClass("offset");
				} else {
					$('.navigation').removeClass("offset");
				}
			
				if($(window).scrollTop() > 500) {
					$('.navigation').addClass("scrolling");
				} else {
					$('.navigation').removeClass("scrolling");
				}

如代码所示，我们添加了offset和scrolling两个样式，并对sticky样式略作修改
CSS代码如下

			nav.sticky{
				position: fixed;
				background: #FFFFFF;
				visibility: hidden;
				box-shadow: 0 0 10px 1px #000000;
			}
			nav.offset{
				transform: translate(0,-100%);
				transition: all 0.5s ease-in-out;
			}
			nav.scrolling{
				visibility: visible;
				transform: translate(0,0);
			}

通过transform和transition两个属性即可实现平滑滑出效果。

4）完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉吸顶导航栏</title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			.main{
				width: 100%;
			}
			.banner{
				width: 100%;
				height: 600px;
				background: url(img/testimonials_bg.jpg);
			}
			.bgh1 {
				color: #FFFFFF;
				padding: 150px 50px;
				font-size: 3em;
				margin: 0px;
			}
			.content{
				width: 100%;
				text-align: center;
				background: #fbfcfc;
				min-height: 1000px;
			}
			header{
				width: 100%;
				height: 100px;
				position: absolute;
				border-bottom: 0.5px solid #999999;
			}
			header nav{
				width: 100%;
			}
			nav ul{
				margin: 0;
				padding: 0;
				list-style: none;
				width: 50%;
				margin-left: 200px;
			}
			nav ul>li{
				float: left;
				color: #FFFFFF;
				height: 100px;
				line-height: 100px;
				vertical-align: middle;
				margin-right: 50px;
				font-size: 20px;
				
			}
			nav.sticky{
				position: fixed;
				background: #FFFFFF;
				visibility: hidden;
				box-shadow: 0 0 10px 1px #000000;
			}
			nav.sticky ul>li{
				color: #000000;
				height: 60px;
				line-height: 60px;
				vertical-align: middle;
				font-size: 16px;
				
			}
			nav.offset{
				transform: translate(0,-100%);
				transition: all 0.5s ease-in-out;
			}
			nav.scrolling{
				visibility: visible;
				transform: translate(0,0);
			}
		</style>
	</head>
	<body>
		<div class="main">
			<header>
				<nav class="navigation">
					<ul>
						<li>HOME</li>
						<li>ABOUT</li>
						<li>TEAM</li>
						<li>SERVICE</li>
						<li>CONTACT</li>
					</ul>
				</nav>
			</header>
			<div class="banner">
				<h1 class="bgh1"> It's not just about ideas.It's about making ideas happen</h1>
			</div>
			<div class="content">
				<h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1>
				<h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1><h1>HELLO</h1>
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).scroll(function() {
				
				if($(window).scrollTop() > 190) {
					$('.navigation').addClass("sticky");
				} else {
					$('.navigation').removeClass("sticky");
				}
			
				if($(window).scrollTop() > 200) {
					$('.navigation').addClass("offset");
				} else {
					$('.navigation').removeClass("offset");
				}
			
				if($(window).scrollTop() > 500) {
					$('.navigation').addClass("scrolling");
				} else {
					$('.navigation').removeClass("scrolling");
				}
			
			});
		</script>
	</body>
</html>

4、完整代码示例下载（含图片）

完整代码（含图片和jquery）

相关文章