devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端学习：dom-js实现导航栏，回到顶部，触底加载更多，吸顶效果，折合表_前端回到顶部

作者：凡人多烦事01 | 2024-02-08 14:07:45

赞

踩

前端回到顶部

1.导航栏

css样式：

z-index  只有在有定位的情况下才有效

transition: all 500ms linear;  动画过渡属性CSS3实现过渡效果 (transition)_眯着眼睛看世界~的博客-CSDN博客CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。transition功能：实现元素不同状态之间的平滑过渡。此前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。格式：transition：过渡的属性 完成时间（s） 运动曲线 延迟时间数值型的属性才可以设置过渡。width,height,color,font-sizetransition-property 过渡属性：发生变化时，想要有过渡效果的属性https://blog.csdn.net/qq_41098956/article/details/109749223?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165735022416781432960549%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165735022416781432960549&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-109749223-null-null.142%5Ev32%5Econtrol,185%5Ev2%5Econtrol&utm_term=transition%3A%20all%20500ms%20linear%3B&spm=1018.2226.3001.4187li:first-child  伪类选择器的使用

  1. <style>
  2. 		* {
  3. 			margin: 0;
  4. 			padding: 0;
  5. 			list-style: none;
  6. 			text-decoration: none;
  7. 		}
  8.  
  9. 		nav {
  10. 			width: 100%;
  11. 			height: 50px;
  12. 			line-height: 50px;
  13. 			background: rgb(18, 18, 91);
  14. 		}
  15.  
  16. 		.box {
  17. 			width: 60%;
  18. 			margin: auto;
  19. 		}
  20.  
  21. 		a {
  22. 			color: white;
  23. 			position: relative;
  24. 			/* z-index  只有在有定位的情况下才有效 */
  25. 			z-index: 2;
  26. 		}
  27.  
  28. 		li {
  29. 			float: left;
  30. 			padding: 0 20px;
  31. 			box-sizing: border-box;
  32.  
  33. 		}
  34.  
  35. 		li:first-child {
  36. 			background: red;
  37. 		}
  38.  
  39. 		li:last-child {
  40. 			background: red;
  41. 			width: 70px;
  42. 			height: 50px;
  43. 			position: absolute;
  44. 			top: 0;
  45. 			right: 0;
  46. 			transition: all 500ms linear;
  47. 		}
  48.  
  49. 		ul {
  50. 			height: 50px;
  51. 			position: relative;
  52. 		}
  53. 	</style>
  1. 	<nav>
  2. 		<div class="box">
  3. 			<ul>
  4. 				<li>
  5. 					<a href="#">首页</a>
  6. 				</li>
  7. 				<li>
  8. 					<a href="#">军事</a>
  9. 				</li>
  10. 				<li>
  11. 					<a href="#">娱乐</a>
  12. 				</li>
  13. 				<li>
  14. 					<a href="#">绝地求生</a>
  15. 				</li>
  16. 				<li>
  17. 					<a href="#">美女</a>
  18. 				</li>
  19.  
  20. 				<li class="move"></li>
  21. 			</ul>
  22. 		</div>
  23. 	</nav>

js
1. var lis = document.querySelectorAll("li:not(.move)");//挑选所有的li标签除了带有class为move的li

2.offsetLeft为 只读属性

3.clientWidth和offsetWidth都可以获取当前对象的宽  而且都包含padding，可将盒子设为怪异盒子使用

4.设中间变量来记录当前高亮部分

5.通过.style.width获取的宽  只能获取其行内样式中的值 不能获取CSS样式中配置的值，可通过  

        参数1: 获取的元素

        参数2: 伪类

        getComputedStyle(main).getPropertyValue("height");

        getComputedStyle(main).height;   来获取

获取伪元素中的样式值：

        getComputedStyle(main,"after").width

  1. <script>
  2. 		var lis = document.querySelectorAll("li:not(.move)");//挑选所有的li标签除了带有class为move的li
  3. 		var move = document.querySelector(".move");
  4.  
  5. 		var previous = lis[0];
  6. 		lis.forEach(function (el) {
  7. 			el.onmouseenter = function () {
  8. 				// console.log(this.offsetLeft + "px");
  9. 				// offsetLeft为 只读属性
  10. 				move.style.left = this.offsetLeft + "px";//注意赋值时要加单位
  11.  
  12. 				// clientWidth和offsetWidth都可以使用  而且都包含padding，可将盒子设为怪异盒子使用
  13. 				// move.style.width=this.offsetWidth+"px";
  14. 				move.style.width = this.clientWidth + "px";
  15. 			}
  16. 			el.onmouseleave = function (el) {
  17. 				move.style.left=previous.offsetLeft+"px";
  18. 				move.style.width=previous.clientWidth+"px";
  19. 			}
  20. 			el.onclick=function(){
  21. 				this.style.background="red";
  22. 				previous.style.background="transparent";
  23. 				previous=this;
  24. 				
  25. 			}
  26. 		})
  27. 	</script>

2.回到顶部

定时器设置的每执行一次延迟的时间为16.67ms：

        60fps:1s填充60次，16.67ms填充一次，更符合浏览效果

默认 给根元素对象 document.docmentElement.scrollTop 是有值的  而document.body.scrollTop没有值        除非body有滚动条（body内容溢出body，overflow-Y:auto;），document.body.scrollTop才有值.

        中间要移除定时器，要给定时器设置名字，通过对定时器的名置空，利用（!null）来控制定时器的继续执行

  1. <style>
  2. 		body {
  3. 			height: 2000px;
  4. 		}
  5.  
  6. 		button {
  7. 			position: fixed;
  8. 			bottom: 20px;
  9. 			right: 30px;
  10. 			width: 100px;
  11. 			line-height: 100px;
  12. 		}
  13. 	</style>
  14.  
  15. <body>
  16. 	<button id="btn">回到顶部</button>
  17. 	<script>
  18. 		var timer = null;
  19. 		btn.onclick = function () {
  20. 			if (!timer) {
  21. 				timer = setInterval(() => {
  22. 					document.documentElement.scrollTop -= 20;
  23. 					// console.log(document.body.scrollTop);//0
  24. 					if(document.documentElement.scrollTop<=0){
  25. 						document.documentElement.scrollTop=0;
  26. 						clearInterval(timer);				
  27. 						timer=null;
  28. 					}
  29. 					
  30. 				}, 16.67);//60fps:1s填充60次，16.67ms填充一次，更符合浏览效果
  31. 			}
  32. 		}
  33.  
  34.  
  35.  
  36. 	</script>
  37. </body>

3.触底加载更多

当    滚动距离 >= 整个页面的高度  - 可视区域的高度  (触底) 时，往页面中追加元素

window.scrollBy(0,100);        参数代表横轴和纵轴每次滚动的增量

window.scrollTo(0,0);              参数表示滚动条最后停留的位置

 // behavior 行为  smooth 圆滑

            window.scrollTo({

                top: 0,

                left:0,

                behavior: "smooth"

            });

        }

  1. btn.onclick=function(){
  2. 			window.scrollTo({
  3. 				top:0,
  4. 				left:0,
  5. 				behavior:"smooth"
  6. 			});
  7. 		}
  8.  
  9. 		window.onscroll=function(){
  10. 			if(document.documentElement.scrollTop>=document.documentElement.scrollHeight-document.documentElement.clientHeight-10){
  11. 				var div=document.createElement("div");
  12. 				div.innerText=Math.random();
  13. 				document.body.appendChild(div);
  14. 			}
  15. 		}

4.吸顶效果

当滚动条的滚动距离大于等于导航栏距离顶部的偏移量时，给导航栏添加固定定位，会脱离文档流会导致导航栏下面的内容直接上移，可以在事件里给内容区添加上部外边距，事件结束后再移除解决，也可以在内容区添加元素将大小设为导航栏的高度，事件开始时将其显示，事件结束后隐藏。

浏览器刷新按钮

 window.onbeforeunload = function () {

            document.documentElement.scrollTop = 0;  

        }

按键 刷新 回到顶部

document.documentElement.onkeyup = function () {

            console.log(event);

            // F5   刷新  ctrl + r 强制刷新  会清缓存

            if(event.keyCode === 116 || (event.ctrlKey  && event.keyCode === 82)){

                console.log(111111111)

                document.documentElement.scrollTop = 0;  

            }

           

        }

  1.         *{
  2.             margin: 0;
  3.         }
  4.         header{
  5.             height: 300px;
  6.             background: red;
  7.         }
  8.         nav{
  9.             width: 100%;
  10.             height: 50px;
  11.             background: blue;
  12.         }
  13.         main{
  14.             
  15.             height: 1500px;
  16.             background: green;
  17.         }
  18.         .fixed {
  19.             position: fixed;
  20.             top: 0;
  21.             left: 0;
  22.          
  23.         }
  24.         div{
  25.             display: none;
  26.             height: 50px;
  27.         }
  28.  
  29.  
  30.  
  31.     <header>头部内容</header>
  32.     <nav>导航条</nav>
  33.     <div></div>
  34.     <main>
  35.         内容跟
  36.     </main>
  37.  
  38.     <script>
  39.         // 1.获取nav 距离顶部的位置
  40.         var nav = document.querySelector('nav');
  41.         // 不定义top 变量名  因为window 属性中包含该值
  42.         var nav_top = nav.offsetTop;
  43.         // console.log(top);
  44.         // console.log(window);
  45.  
  46.         window.onscroll = function () {
  47.             // 当前滚动值
  48.             var s_top = document.documentElement.scrollTop;
  49.             if(s_top >= nav_top){
  50.                 nav.classList.add("fixed");
  51.                 // 可以规避 固定定位 脱离文档流 导致main的内容被直接上移
  52.                 // document.querySelector("main").style.marginTop = "50px";
  53.                 document.querySelector('div').style.display = "block";
  54.                 
  55.             }
  56.             else{
  57.                 nav.classList.remove("fixed");
  58.                 // document.querySelector("main").style.marginTop = "0";
  59.                 document.querySelector('div').style.display = "none";
  60.  
  61.             }
  62.         }

5.折合表

先将折合表设置较小的高度，让其内容超出部分隐藏，当点击事件发生时，将其高度设为可滚动的高度（scrollHeight），事件结束后再移除。        利用中间变量来控制事件发生时表的折合状态。

 btns[i].isOpen = false;                   this.isOpen = !this.isOpen;

  1. <style>
  2. 		.wrap {
  3. 			height: 50px;
  4. 			line-height: 50px;
  5. 			background: gray;
  6. 			margin-bottom: 10px;
  7. 			transition: all 100ms linear;
  8. 			overflow: hidden;
  9. 		}
  10.  
  11. 		.content {
  12. 			background: pink;
  13. 		}
  14. 	</style>
  15.  
  16.  
  17. <body>
  18. 	<div class="box">
  19. 		<div class="wrap">
  20. 			<span>html</span>
  21. 			<button>展开</button>
  22. 			<div class="content">
  23. 				<h1>111</h1>
  24. 				<h1>222</h1>
  25. 			</div>
  26. 		</div>
  27. 		<div class="wrap">
  28. 			<span>html</span>
  29. 			<button>展开</button>
  30. 			<div class="content">
  31. 				<h1>111</h1>
  32. 				<h1>222</h1>
  33. 			</div>
  34. 		</div>
  35. 		<div class="wrap">
  36. 			<span>html</span>
  37. 			<button>展开</button>
  38. 			<div class="content">
  39. 				<h1>111</h1>
  40. 				<h1>222</h1>
  41. 			</div>
  42. 		</div>
  43. 	</div>
  44. 	<script>
  45. 		var btns = document.querySelectorAll("button");
  46. 		var wraps = document.querySelectorAll(".wrap");
  47. 		for (let i = 0; i < btns.length; i++) {
  48. 			btns[i].isOpen = false;
  49. 			btns[i].onclick = function () {
  50. 				this.isOpen = !this.isOpen;
  51. 				if (this.isOpen) {
  52. 					wraps[i].style.height = wraps[i].scrollHeight + "px";
  53. 				}
  54. 				else {
  55. 					wraps[i].style.height = "50px";
  56. 				}
  57. 			}
  58. 		}
  59. 	</script>
  60. </body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/69362
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号