1.导航栏
css样式：
z-index 只有在有定位的情况下才有效
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
width: 100%;
height: 50px;
line-height: 50px;
background: rgb(18, 18, 91);
}
.box {
width: 60%;
margin: auto;
}
a {
color: white;
position: relative;
/* z-index 只有在有定位的情况下才有效 */
z-index: 2;
}
li {
float: left;
padding: 0 20px;
box-sizing: border-box;
}
li:first-child {
background: red;
}
li:last-child {
background: red;
width: 70px;
height: 50px;
position: absolute;
top: 0;
right: 0;
transition: all 500ms linear;
}
ul {
height: 50px;
position: relative;
}
</style> <nav>
<div class="box">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">军事</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">绝地求生</a>
</li>
<li>
<a href="#">美女</a>
</li>
<li class="move"></li>
</ul>
</div>
</nav>js
1. var lis = document.querySelectorAll("li:not(.move)");//挑选所有的li标签除了带有class为move的li2.offsetLeft为 只读属性
3.clientWidth和offsetWidth都可以获取当前对象的宽 而且都包含padding，可将盒子设为怪异盒子使用
4.设中间变量来记录当前高亮部分
5.通过.style.width获取的宽 只能获取其行内样式中的值 不能获取CSS样式中配置的值，可通过
参数1: 获取的元素
参数2: 伪类
getComputedStyle(main).getPropertyValue("height");
getComputedStyle(main).height; 来获取
获取伪元素中的样式值：
getComputedStyle(main,"after").width
<script>
var lis = document.querySelectorAll("li:not(.move)");//挑选所有的li标签除了带有class为move的li
var move = document.querySelector(".move");
var previous = lis[0];
lis.forEach(function (el) {
el.onmouseenter = function () {
// console.log(this.offsetLeft + "px");
// offsetLeft为 只读属性
move.style.left = this.offsetLeft + "px";//注意赋值时要加单位
// clientWidth和offsetWidth都可以使用 而且都包含padding，可将盒子设为怪异盒子使用
// move.style.width=this.offsetWidth+"px";
move.style.width = this.clientWidth + "px";
}
el.onmouseleave = function (el) {
move.style.left=previous.offsetLeft+"px";
move.style.width=previous.clientWidth+"px";
}
el.onclick=function(){
this.style.background="red";
previous.style.background="transparent";
previous=this;
}
})
</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）来控制定时器的继续执行
<style>
body {
height: 2000px;
}
button {
position: fixed;
bottom: 20px;
right: 30px;
width: 100px;
line-height: 100px;
}
</style>
<body>
<button id="btn">回到顶部</button>
<script>
var timer = null;
btn.onclick = function () {
if (!timer) {
timer = setInterval(() => {
document.documentElement.scrollTop -= 20;
// console.log(document.body.scrollTop);//0
if(document.documentElement.scrollTop<=0){
document.documentElement.scrollTop=0;
clearInterval(timer);
timer=null;
}
}, 16.67);//60fps:1s填充60次，16.67ms填充一次，更符合浏览效果
}
}
</script>
</body>3.触底加载更多
当 滚动距离 >= 整个页面的高度 - 可视区域的高度 (触底) 时，往页面中追加元素
window.scrollBy(0,100); 参数代表横轴和纵轴每次滚动的增量
window.scrollTo(0,0); 参数表示滚动条最后停留的位置
// behavior 行为 smooth 圆滑
window.scrollTo({
top: 0,
left:0,
behavior: "smooth"
});
}
btn.onclick=function(){ window.scrollTo({ top:0, left:0, behavior:"smooth" }); } window.onscroll=function(){ if(document.documentElement.scrollTop>=document.documentElement.scrollHeight-document.documentElement.clientHeight-10){ var div=document.createElement("div"); div.innerText=Math.random(); document.body.appendChild(div); } }
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;
}
}
*{
margin: 0;
}
header{
height: 300px;
background: red;
}
nav{
width: 100%;
height: 50px;
background: blue;
}
main{
height: 1500px;
background: green;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
div{
display: none;
height: 50px;
}
<header>头部内容</header>
<nav>导航条</nav>
<div></div>
<main>
内容跟
</main>
<script>
// 1.获取nav 距离顶部的位置
var nav = document.querySelector('nav');
// 不定义top 变量名 因为window 属性中包含该值
var nav_top = nav.offsetTop;
// console.log(top);
// console.log(window);
window.onscroll = function () {
// 当前滚动值
var s_top = document.documentElement.scrollTop;
if(s_top >= nav_top){
nav.classList.add("fixed");
// 可以规避 固定定位 脱离文档流 导致main的内容被直接上移
// document.querySelector("main").style.marginTop = "50px";
document.querySelector('div').style.display = "block";
}
else{
nav.classList.remove("fixed");
// document.querySelector("main").style.marginTop = "0";
document.querySelector('div').style.display = "none";
}
}5.折合表
先将折合表设置较小的高度，让其内容超出部分隐藏，当点击事件发生时，将其高度设为可滚动的高度（scrollHeight），事件结束后再移除。 利用中间变量来控制事件发生时表的折合状态。
btns[i].isOpen = false; this.isOpen = !this.isOpen;
<style>
.wrap {
height: 50px;
line-height: 50px;
background: gray;
margin-bottom: 10px;
transition: all 100ms linear;
overflow: hidden;
}
.content {
background: pink;
}
</style>
<body>
<div class="box">
<div class="wrap">
<span>html</span>
<button>展开</button>
<div class="content">
<h1>111</h1>
<h1>222</h1>
</div>
</div>
<div class="wrap">
<span>html</span>
<button>展开</button>
<div class="content">
<h1>111</h1>
<h1>222</h1>
</div>
</div>
<div class="wrap">
<span>html</span>
<button>展开</button>
<div class="content">
<h1>111</h1>
<h1>222</h1>
</div>
</div>
</div>
<script>
var btns = document.querySelectorAll("button");
var wraps = document.querySelectorAll(".wrap");
for (let i = 0; i < btns.length; i++) {
btns[i].isOpen = false;
btns[i].onclick = function () {
this.isOpen = !this.isOpen;
if (this.isOpen) {
wraps[i].style.height = wraps[i].scrollHeight + "px";
}
else {
wraps[i].style.height = "50px";
}
}
}
</script>
</body>
2857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
