发表于： 2023-02-24 21:34:33
0 277
今天的js：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
display: inline-block;
/*width: 200px;*/
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div>1111111</div>
<script>
const div = document.querySelector('div')
console.log(div.clientWidth)
window.addEventListener('resize', function () {
console.log(1)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 4000px;
}
.box {
margin-top: 500px;
width: 200px;
height: 200px;
background-color: red;
}
.a {
width: 80px;
height: 50px;
cursor: pointer;
background-color: skyblue;
text-align: center;
line-height: 50px;
position:fixed;
right:20px;
top:200px;
opacity: 0;
}
.header {
position: fixed;
top: -80px;
left: 0;
width: 100%;
height: 80px;
line-height: 80px;
background-color: yellow;
transition: all .3s;
text-align: center;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="header">顶部导航栏</div>
<div class="a">返回顶部</div>
<script>
const box = document.querySelector('.box')
const a = document.querySelector('.a')
const header = document.querySelector('.header')
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop
// if (n >= 300) {
// a.style.opacity = 1
// }else {
// a.style.opacity = 0
// }
//简写 返回顶部模块
a.style.opacity = n >= box.offsetTop? 1 : 0
//当页面滚动到 盒子的时候 就改变 头部的top值
//页面bee卷去的头部 >= 盒子的位置 offsetTop
const n1 = document.documentElement.scrollTop
// if (n1 >= box.offsetTop) {
// header.style.top = 0
// } else {
// header.style.top = '-80px'
// }
//三元表达式
header.style.top = n1 >= box.offsetTop ? 0 : '-80px'
})
a.addEventListener('click', function () {
// document.documentElement.scrollTop = 0
// window.scrollTo(x, y)
window.scrollTo(0, 0)
})
// console.log(box.offsetLeft)
</script>
</body>
</html>
返回列表
评论