滚动吸顶加锚点跳转及其滚动穿透案例

1登峰造极

已于 2023-04-07 10:41:57 修改

阅读量486

点赞数

分类专栏： js 文章标签： javascript css vue.js

于 2020-10-10 09:47:34 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/108991061

版权

js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在这里插入图片描述

主要用到两个知识点position: sticky; a标签的描点

index.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="dom.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.alpha{
				height: 100%;
				overflow: hidden;
				position: relative;
			}
			.alpha body{
				height: 100%;
				overflow: hidden;
			}
			body,
			html {
				width: 100%;
				height: 100%;
				cursor: pointer;
				scroll-behavior: smooth;
			}

			ul li {
				list-style: none;
			}

			h2 {
				width: 90%;
				height: 40px;
				position: sticky;
				top: 0px;
				font-size: 15px;
				color: #fff;
				background: #03A9F4;
				border-top-right-radius: 0.3125rem;
				border-bottom-right-radius: 0.3125rem;
				line-height: 40px;
				text-align: left;
				margin-left: 5px;
				transform-origin: center;
			}

			ul li:nth-child(1) h2 {
				background: #21c7f3;
			}

			ul li p {
				font-size: 14px;
				color: #999;
				padding: 10px 10px;
			}

			.hidebox {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.8);
				position: fixed;
				top: 0px;
				left: 0px;
				
			}

			.hidebox a {
				display: block;
				width: 98%;
				height: 40px;
				background: #fff;
				margin: 10px auto;
				border-radius: 5px;
				line-height: 40px;
				text-decoration: none;
				color: #fff;
				font-size: 13px;
				text-indent: 5px;
			}

			.hidebox a:nth-child(1) {
				background: green;
			}

			.hidebox a:nth-child(2) {
				background: red;
			}

			.hidebox a:nth-child(3) {
				background: fuchsia;
			}

			.hidebox a:nth-child(4) {
				background: violet;
			}

			.hidebox a:nth-child(5) {
				background: darkgoldenrod;
			}

			.hidebox a:nth-child(6) {
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li :id="item.id" v-for="(item,index) in list" :key='index' @click="openhide()">
					<h2>{{item.name}}</h2>
					<div v-for="(item1,index1) in item.data">
						<p>{{item1.tit}}</p>
					</div>
				</li>
			</ul>
			<div class="hidebox" v-show="isHide">
				<a v-for="(item,index) in list" :key='index' :href=" '#'+item.id " @click="hidebox()">{{item.name}}</a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				isHide: false,
				htmlDom: null,
				list: [{
						"name": "青花瓷[周杰伦]",
						"id": "1",
						"data": [{
								"tit": "素胚勾勒出青花笔锋浓转淡"
							},
							{
								"tit": "瓶身描绘的牡丹一如你初妆"
							},
							{
								"tit": "冉冉檀香透过窗心事我了然"
							},
							{
								"tit": "宣纸上走笔至此搁一半"
							},
							{
								"tit": "去到我去不了的地方"
							},
							{
								"tit": "天青色等烟雨 而我在等你"
							},{
								"tit": "炊烟袅袅升起 隔江千万里"
							}
						]
					},
					{
						"name": "点歌的人「海来阿木」",
						"id": "3",
						"data": [{
								"tit": "就把这首歌送给失意的你"
							},
							{
								"tit": "是喜是悲 尘缘注定"
							},
							{
								"tit": "不折磨自己"
							},
							{
								"tit": "就把这首歌送给迷茫的你"
							},
							{
								"tit": "屋外沧桑 屋内过往"
							}
						]
					},
					{
						"name": "你莫走",
						"id": "1288",
						"data": [{
								"tit": "妹儿丫头bai你莫走"
							},
							{
								"tit": "唱首歌歌bai儿把你留"
							},
							{
								"tit": "歌中有我对你的真情"
							},
							{
								"tit": "歌中有你的温柔"
							},
							{
								"tit": "哥哥哥哥我不走"
							}
						]
					}, {
						"name": "一场游戏一场梦「王杰」",
						"id": "12576",
						"data": [{
								"tit": "不要谈什么分bai离"
							},
							{
								"tit": "我不会因为这样而哭泣"
							},
							{
								"tit": "那只是昨夜的一场梦而已bai"
							},
							{
								"tit": "不要说愿不愿意"
							},
							{
								"tit": "我不会因为这样而在意"
							}
						]
					}, {
						"name": "突然的自我「伍佰」",
						"id": "1223",
						"data": [{
								"tit": "听见你说，朝阳起又落"
							},
							{
								"tit": "晴雨难测，道路是脚步多"
							},
							{
								"tit": "我已习惯，你突然间的自我"
							},
							{
								"tit": "挥挥洒洒，将自然看通透"
							},
							{
								"tit": "那就不要留，时光一过不再有"
							}
						]
					}, {
						"name": "真的爱你 (1991生命接触演唱会版)-Beyond",
						"id": "123",
						"data": [{
								"tit": "无法可修饰的一对手"
							},
							{
								"tit": "带出温暖永远在背后"
							},
							{
								"tit": "总是罗嗦始终关注"
							},
							{
								"tit": "沉醉于音阶她不赞赏"
							},
							{
								"tit": "母亲的爱却永远未退让"
							}
						]
					}
				]
			},
			methods: {
				openhide() {
					this.isHide = true;
					addClass(this.htmlDom, 'hidebox')
				},
				hidebox() {
					this.isHide = false;
					removeClass(this.htmlDom, 'hidebox');
				},
				
			},
			mounted() {
	          this.htmlDom = document.getElementsByTagName('html')[0];
			  
			}
		})
	</script>
</html>

由于设置了 position: fixed;top: 0px;left: 0px;这样就产生滚动穿透

解决滚动穿透有很多办法,网上随便找了一个

dom.js

 function  hasClass(el, className){
  let reg = new RegExp('(^|\s)' + className + '(\s|$)')
  return reg.test(el.className)
}
 
 function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
  if(el.className === ''){
    el.className += className
  }else{
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
  }
  
}

 function removeClass(el,className) {
  if (hasClass(el, className)) {
    el.className = el.className.replace(new RegExp('(\s|^)' + className + '(\s|$)'), '');
  };
}

如果你使用的是脚手架将方法写成 export function 的形式在引入