jQuery实现电梯导航功能案例

无良小老板

已于 2022-03-06 15:53:46 修改

阅读量3.9k

点赞数 2

分类专栏： jQuery 文章标签： jQuery 电梯导航滚动事件区域跳转固定工具栏

于 2022-02-02 23:37:35 首次发布

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/122773131

版权

jQuery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

jQuery实现电梯导航功能案例

在页面中，一般都会有一个侧边导航栏，点击选项页面会跳转到对应的区域；或者滑动鼠标页面到到一个分类的区域侧边导航栏的选项也会变。

隐藏导航，移动一定区域后，显示导航
通过点击导航跳转到相应区域
一键返回页面顶部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>电梯导航案例</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.floor{
				margin: 300px auto;
				width: 800px;
				
			}
			.floor img{
				display: block;
				margin-bottom: 100px;
			}
			.fixedtool {
			    position: fixed;
			    top: 250px;
			    left: 150px;
			    width: 100px;
			    background-color: #95ecde;
				display: none;
			}
			.fixedtool li {
			    height: 40px;
			    line-height: 40px;
			    text-align: center;
			    font-size: 17px;
			    border-bottom: 2px solid #818181;
			    cursor: pointer;
			}
			.back{
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 17px;
				cursor: pointer;
			}
			.fixedtool .current {
			    background-color: #2a70cb;
			    color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="floor">
			<div class="first w">
				<img src="images/keai.jpg" width="800" alt="">
			</div>
			<div class="second w">
				<img src="images/扇宝.jpg" width="800">
			</div>
			<div class="third w">
				<img src="images/月兮.jpg" width="800">
			</div>
			<div class="four w">
				<img src="images/血红叶.jpg" width="800">
			</div>
			<div class="five w">
				<img src="images/汉服.jpg" width="800">
			</div>
		</div>
		<div class="fixedtool">
		    <ul>
		        <li class="current">可爱初音</li>
		        <li>扇宝</li>
		        <li>搓澡球</li>
		        <li>雪花枫叶</li>
				<li>汉服少女</li>
				<div class="back">返回顶部</div>
		    </ul>
		</div>
		<script type="text/javascript">
			$(function(){
				//节流阀， 互斥锁
				var flag = true;
				//隐藏导航
				var boxTop = $(".fixedtool").offset().top;
				//使其在下面位置刷新的时候，导航栏同样出现
				toggleTool();
				function toggleTool(){
					if ($(document).scrollTop() >= 350){
						$(".fixedtool").fadeIn();
					}else {
						$(".fixedtool").fadeOut();
					};
				}
				
				$(window).scroll(function(){
					// console.info($(document).scrollTop());  显示与文档顶部距离
					toggleTool();
					// 3. 当页面滚动到某个内容区域的时候，电梯导航小li相应添加和删除current类名
					if(flag){
						$(".floor .w").each(function(i,ele){
							if($(document).scrollTop() >= $(ele).offset().top){
								// console.info(i);
								$(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
							}
						})
					}
				});
				
				// 2、 通过点击电梯页面里面的选项滚动到相应内容区域
				$(".fixedtool li").click(function(){
					//节流阀， 互斥锁
					flag = false;
					console.info($(this).index());
					// console.info($(".floor .w"));
					//每次点击小i，可以计算页面要的位置
					//选出对应索引号的内容区盒子，计算它的.offset().top
					var current = $(".floor .w").eq($(this).index()).offset().top;
					//页面滚动效果
					$("body,html").stop().animate({
						scrollTop:current,
					},function() {
						flag = true;
					});
					//点击之后，让当前li 添加current类名，兄弟节点移除current类名
					$(this).addClass("current").siblings().removeClass("current");
				})
				// 返回顶部
				$(".back").click(function(){
					// $(document).scrollTop(0); 直接返回顶部
					//animate()动画返回
					// $(this).addClass("current");
					$("body,html").stop().animate({
						scrollTop:0,
					});
					
					// $(document).stop().animate({
					// 	scrollTop:0,
					// }); 不能够是文档 而是 html 和 body元素做动画
				})
			})
		</script>
	</body>
</html>