1.自执行函数 闭包
解决全局污染的问题
(function(){
})();
2.client 屏幕可视区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function () {
//document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
//窗口大小发生变化时，会调用此方法
window.onresize = function () {
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
}
}
</script>
</body>
</html>
3.offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<div class="wrap" style=" 300px;height: 300px;background-color: green;position: relative; top: 20px;">
<div id="box" style=" 200px;height: 200px;border: 5px solid red;position: absolute;top:60px;left: 30px;">
</div>
</div>
</div>
<script>
window.onload = function () {
//offsetWidth 占位宽 内容+padding+border
//offsetHeight 占位高
//offsetTop 如果盒子没有设置定位，到body的顶部的距离，如果设置定位，那么是以父辈为基准的top值
//offsetLeft 如果盒子没有设置定位，到body的左部的距离，如果设置定位，那么是以父辈为基准的left值
var box = document.getElementById("box");
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
}
</script>
</body>
</html>
4.scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="height: 200px;background-color: red;"></div>
<div style="height: 200px;background-color: green;"></div>
<div style="height: 200px;background-color: yellow;"></div>
<div style="height: 200px;background-color: blue;"></div>
<div style="height: 200px;background-color: gray;"></div>
<div id = 'scroll' style=" 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青
青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青
青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青
青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青
青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青
</p>
</div>
<script>
window.onload = function () {
//实施监听滚动事件
window.onscroll = function () {
//页面卷起的高度
console.log("上"+document.documentElement.scrollTop);
console.log('左'+document.documentElement.scrollLeft);
console.log('宽'+document.documentElement.scrollWidth);
console.log('高'+document.documentElement.scrollHeight);
}
var s = document.getElementById("scroll");
s.onscroll = function () {
// scrollHeight:内容的高度+padding 不包含边框
console.log('宽'+s.scrollWidth);
console.log('高'+s.scrollHeight);
}
}
</script>
</body>
</html>
5.固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
100%;
height: 80px;
background-color: red;
}
.content{
100%;
height: 1000px;
background-color: purple;
/*position: relative;*/
}
.fixTop{
100%;
height: 100px;
background-color: green;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.input{
400px;
height: 60px;
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -200px;
top: 150px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="input"></div>
</div>
<div class="fixTop" style="display: none;"></div>
<script>
window.onload = function() {
var fromTop = document.getElementsByClassName('input')[0].offsetTop;
var fixBox = document.getElementsByClassName('fixTop')[0];
console.log(fromTop);
var count = 0;
var timer = null;
window.onscroll = function() {
var htmlTop = document.documentElement.scrollTop;
console.log(htmlTop);
if (htmlTop >= fromTop) {
clearInterval(timer);
timer = setInterval(function () {
count+=10;
fixBox.style.display = 'block';
// fixBox.style.opacity = count;
fixBox.style.height = count+'px';
if (count == 100) {
clearInterval(timer);
}
},1)
}else{
fixBox.style.display = 'none';
}
}
}
</script>
</body>
</html>