web移动端实现点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）

最新推荐文章于 2024-04-23 11:46:37 发布

缝隙里看你

最新推荐文章于 2024-04-23 11:46:37 发布

阅读量2.3k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_42097490/article/details/115350809

版权

主要功能：

1.初始页面隐藏导航栏
2.滑动到一定位置导航栏显示
3.滑动到对应模块导航栏对应加上样式
4.有锚点，点击导航栏滑动到对应内容

效果图

在这里插入图片描述
直接上代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<script type="text/javascript" src="js/v.js" ></script>
	<style>
		*{margin: 0;padding: 0;font-size: 30px;text-align: center;}
		.header{height: 100px;width: 640px;margin: 0 auto; background: #fff;position: fixed;top: 0;left: 0;right: 0;}
		.wrap{width: 640px;margin: 0 auto; height: 300px;background: #33CD00;}
		.wrap-content{width: 640px;margin: 0 auto;}
		
		/*导航栏*/
		.wc-nav{width: 640px; background: #fff;position: fixed; height: 90px;line-height: 90px;top: 85px;font-size: 27px;z-index: 999;opacity: 0;box-shadow: 0px 15px 15px -15px rgb(200 200 200 / 60%);}
		.wn-item{display: flex;justify-content: space-between;align-items: center;margin: 0 30px;}
		.wc-nav a{color: #333;font-weight: bold; text-decoration: none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;position: relative;text-shadow:  4px 4px 6px rgba(0,0,0,0.1)}
		.wc-nav a span{position: absolute;top: -20px;right: -34px;font-size: 15px;color:#FF631D;}
		.fixDiv{opacity: 1;}
		.fixDivnone{opacity: 0;}
		
		.wc-nav .active{color:#FF631D;position: relative;}
		.wc-nav .active::before {content: '';height: 3px;width: 60px;border-radius: 3px;background: -webkit-linear-gradient(right,#FE6F1E,#FE8E17);
		  position: absolute;margin-top: 74px;left: 22%;}

		.wcc-list{height: 500px;border: 1px solid red;background: #90EE90;}
		.wrap-foot{height: 1000px;background: #269ABC;width: 640px;margin: 0 auto;}
	</style>
</head>
<body>
	<div class="header">吸顶头部</div>
	<div style="height: 100px;width: 640px;margin: 0 auto;"></div>
	<div class="wrap"></div>
	<!--内容-->
	<div class="wrap-content">
		<!--导航-->
		<div class="wc-nav" id="sort_menus">
			<div class="wn-item">
				<a href="#a" class='active'>限时抢购</a>
				<a href="#b">实惠之选</a>
				<a href="#c">品质之选</a>
				<a href="#d">高端定制</a>
			</div>
		</div>
		<!--内容-->
		<div class="wc-content">
			<!-- 设置暗锚点 -->
			<a name="a" style="position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
			<!--限时抢购-->
			<div id="a1" class="wcc-list wcc-list-item">第一部分内容</div>
			<!-- 设置暗锚点 -->
			<a name="b" style=" position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
			<!--实惠之选-->
			<div id="a2" class="wcc-list" style="background: #78B787;">第二部分内容</div>
			<!-- 设置暗锚点 -->
			<a name="c" style=" position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
			<!--品质之选-->
			<div id="a3" class="wcc-list" style="background: #07BA9F;">第三部分内容</div>
			<!-- 设置暗锚点 -->
			<a name="d" style=" position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
			<!--高端定制-->
			<div id="a4" class="wcc-list" style="background: #808080;">第四部分内容</div>
		</div>
	</div>

	<div class="wrap-foot"></div>
	<script>
		$(window).scroll(function(event){
			checkscroll()
		});
		function checkscroll(){
		    var winPos = $(window).scrollTop()+182; //屏幕位置
		    var NodePos = [$('#a1').offset().top,$('#a2').offset().top,$('#a3').offset().top,$('#a4').offset().top],//提前获取好元素位置
		    length = NodePos .length;
		    if(winPos>=NodePos[0]&&winPos<=NodePos[1]){
		    	$('.wc-nav a').removeClass('active');
		  		$('.wc-nav a:nth-child(1)').addClass('active');
		    }else if(winPos>=NodePos[1]&&winPos<=NodePos[2]){
		    	$('.wc-nav a').removeClass('active');
		  		$('.wc-nav a:nth-child(2)').addClass('active');
		    }else if(winPos>=NodePos[2]&&winPos<=NodePos[3]){
		    	$('.wc-nav a').removeClass('active');
		  		$('.wc-nav a:nth-child(3)').addClass('active');
		    }else if(winPos>=NodePos[3]){
		    	$('.wc-nav a').removeClass('active');
		  		$('.wc-nav a:nth-child(4)').addClass('active');
		    }
		}
		$(function(){
			var scTop=0;//初始化垂直滚动的距离
			$(document).scroll(function(){
			    scTop=$(this).scrollTop();//获取到滚动条拉动的距离
					console.log(scTop);//查看滚动时，垂直方向上，滚动条滚动的距离
			    if(scTop>=200){
			    //核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
			        $("#sort_menus").addClass("fixDiv");
			    }else{
			        $("#sort_menus").removeClass("fixDiv");
			    }
			});
		})
	</script>
</body>
</html>

有什么问题可以在下方留言，共同学习探讨

缝隙里看你

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
web移动端实现点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）

主要功能：1.初始页面隐藏导航栏2.滑动到一定位置导航栏显示3.滑动到对应模块导航栏对应加上样式4.有锚点，点击导航栏滑动到对应内容效果图直接上代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" &gt
复制链接

扫一扫