发表于： 2023-01-04 21:23:07
0 192
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client系列</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
border: 20px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<script>
//client 宽度 跟 offsetWidth 最大的区别是 不包括边框 一样是包含padding
var div = document.querySelector('div');
console.log(div.clientWidth);
//1、立即执行函数 ：不需要调用，立马能够自己执行的函数
function fn() {
console.log(1);
}
fn();
//2、写法 也可以传递参数进来 (function() {})() 或者 (function(){} ())
(function (){
console.log(2);
var num = 10;
})(); //第二个小括号可以看做是调用函数
(function (a,b){
console.log(a + b);
var num = 10;
}(1,2));
//3、创建了一个独立的作用域。避免了命名冲突问题
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll系列</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid blue;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
<script>
// scroll 系列 返回自身实际的高度，不合边框，返回值不带单位
// scrollTop 返回被卷去的上侧距离 scrollLeft 返回被卷去的左侧距离 返回值不带单位
var div = document.querySelector('div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
// scroll 滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll',function (){
console.log(div.scrollTop);
})
</script>
</body>
</html>
侧边栏练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定侧栏</title>
<style>
.slider-bar {
position: absolute;
left: 825px;
top: 290px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: red;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体区域</div>
<script>
//1获得元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offsetTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
//当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
//获取 main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
//2、 页面滚动事件 scroll
document.addEventListener('scroll',function () {
// console.log(window.pageYOffset);
//3、大部分我们页面被捐钱的头部大小等于 172 此时 侧边栏就要改为固定位置
if (window.pageYOffset >= bannerTop){
sliderbar.style.position = 'fixen';
sliderbar.style.top = sliderbarTop + 'px';
}else {
sliderbar.style.position = 'adsolute';
sliderbar.style.top = '300px';
}
// 4、当我们页面滚动到main盒子 ，就是显示goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
}else {
goBack.style.display = 'none';
}
})
</script>
</body>
</html>
返回列表
评论