一.client, offset, scroll系列
1.client系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>client</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
position: absolute;
border: 10px solid coral;
/*margin: 10px 0px 0px 0px;*/
padding: 80px;
}
</style>
</head>
<body>
<div class="box">呜呜呜呜呜呜呜呜无无无无无无无无无无无无无无无无无无无无无无无无无无无呜呜呜呜呜呜呜呜无无无无无无无无无无无无无无无无无无无无无无无无无无无</div>
<script type="text/javascript">
// clientTop 内容区域到边框顶部的距离,说白了就是边框的-高度
// clientLeft 内容区域到边框左部的距离,说白了就是边框的宽度
// clientWidth 内容区域+左右padding,不包含border 可视宽度
// clientHeight 内容区域+上下padding 可视高度
var oBox = document.getElementsByClassName("box")[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);
</script>
</body>
</html>
示例
2.屏幕的可视区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屏幕可视化区域</title>
</head>
<body>
<script type="text/javascript">
//屏幕的可视化区域
window.onload = function(){
//document.documentElement 获取的是HTML标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
//窗口大小发生变化时,会调用此方法
window.onresize = function(){
//console.log(111);
console.log(document.documentElement.clientWidth);
// console.log(document.documentElement.clientHeight);
}
}
</script>
</body>
</html>
屏幕的可视区域
3.offset系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offset系列</title>
</head>
<body style="height: 2000px;">
<div>
<div class="wrap" style="width: 300px; height: 300px; background-color: aquamarine; position: relative; top: 20px;">
<div id="box" style="width: 200px; height: 200px; border: 5px solid cornflowerblue; position: absolute; top: 60px; left: 30px;"></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box")
// offsetWidth占位宽 内容+padding+border
// offsetHeight占位高
// ofsetTop:如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的top值
// offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么以父辈为基准的left值
console.log(box.offsetTop);
console.log(box.offsetLeft);
//console.log(box.offsetWidth)
//console.log(box.offsetHeight)
}
</script>
</html>
offset系列
4.scroll系列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="width: 2000px; height: 2000px;">
<div style="height: 200px; background-color: rosybrown;"></div>
<div style="height: 200px; background-color: burlywood;"></div>
<div style="height: 200px; background-color: cornflowerblue;"></div>
<div style="height: 200px; background-color: darkcyan;"></div>
<div style="height: 200px; background-color: aquamarine;"></div>
<div id = "scroll" style="width: 200px; height: 200px; border: 1px solid red; overflow: auto; padding: 10px; margin: 5px 0px 0px 0px;">
<p>嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰嘻唰唰</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
//实施监听滚动事件
window.onscroll = function(){
//console.log(111);
//页面卷起的高度
// 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.scrollTop)
//console.log("左"+s.scrollLeft)
//包含内容 + padding+border
console.log("宽" + s.scrollWidth);
console.log("高" + s.scrollHeight);
}
}
</script>
</html>
示例
5.自动执行函数
HTMl:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="1.js"></script>
<script src="2.js"></script>
<script>
console.log(window.$);
console.log(window.$1);
</script>
</body>
</html>
JavaScript:
(function(window) {
var a = 5;
window.$ = a;
})(window);
(function(window) {
var a = 6;
window.$1 = a;
})(window);
6.固定导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.head{
width: 100%;
height: 80px;
background-color: cornflowerblue;
}
.content{
width: 100%;
height: 1000px;
background-color: darkgray;
/*position:relative;*/
}
.fixTop{
width: 100%;
height: 100px;
background-color: greenyellow;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.input{
width: 400px;
height: 60px;
background-color: darkcyan;
position: absolute;
left: 50%;
margin-left:-200px
top: 150px;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="content">
<div class="input"></div>
</div>
<div class="fixTop" style="display: none;"></div>
<script type="text/javascript">
window.onload = function(){
var fromTop = document.getElementsByClassName("input")[0].offsetTop;
var fixBox = document.getElementsByClassName("fixTop")[0];
console.log(fromTop);
var count = 0;
var time = null;
window.onscroll = function(){
var htmlTop = document.documentElement.scrollTop;
console.log(htmlTop);
if (htmlTop >= fromTop) {
clearInterval(time);
time = setInterval(function(){
count += 10;
fixBox.style.display = "block";
fixBox.style.opacity = count;
fixBox.style.height = count + "px";
if (count == 100) {
clearInterval(time);
count = 0;
}
},1)
}else{
fixBox.style.display = "none";
}
}
}
</script>
</body>
</html>
固定导航栏
二.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: none;
}
body{
/*padding-top: 80px;*/
}
.header{
width: 100%;
height: 70px;
background-color: black;
/*display: none;*/
}
.w{
width: 1210px;
overflow: hidden;
margin: 0 auto;
}
.header ul li{
float: left;
width: 242px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: blue;
}
.header ul li a{
display: block;
width: 242px;
height: 70px;
color: #fff;
}
/*固定导航栏*/
.header-fix{
width: 100%;
height: 80px;
background-color: white;
box-shadow: 0 0 5px #888;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*margin-bottom: 10px;*/
}
.header-fix .logo{
float: left;
width: 117px;
height: 57px;
padding-top: 23px;
}
.header-fix .fm{
float: left;
width: 700px;
height: 80px;
margin-left: 100px;
}
.fm input[type=‘text‘]{
float: left;
width: 578px;
height: 50px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
margin-top: 15px;
padding-left: 20px;
font-size: 20px;
}
.fm input[type=‘submit‘]{
float: left;
width: 100px;
height: 52px;
background-color: #38f;
position: relative;
top: 15px;
color: #fff;
line-height: 52px;
font-size: 18px;
}
.box1{
width: 100%;
height: 200px;
background-color: red;
}
.box2{
width: 100%;
height: 300px;
background-color: green;
}
</style>
</head>
<body style="height: 2000px">
<div class="header">
<div class="w">
<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>
</ul>
</div>
</div>
<div class="header-fix">
<div class="w">
<div class="logo">
<img src="./logo_top.png" alt="">
</div>
<form class="fm">
<input type="text" name="">
<input type="submit" name="" value="百度一下">
</form>
</div>
</div>
<div class="box1"></div>
<div class="box2"></div>
<script type="text/javascript">
window.onload = function(){
var box2Height = document.getElementsByClassName(‘box2‘)[0];
var fixBox = document.getElementsByClassName(‘header-fix‘)[0];
var headerBox = document.getElementsByClassName(‘header‘)[0];
window.onscroll = function(){
console.log(box2Height.offsetTop);
if (document.documentElement.scrollTop >=box2Height.offsetTop) {
fixBox.style.display = ‘block‘;
document.body.style.paddingTop = ‘80‘+ ‘px‘;
headerBox.style.display = ‘none‘;
}else{
fixBox.style.display = ‘none‘;
document.body.style.paddingTop = ‘0‘+ ‘px‘;
headerBox.style.display = ‘block‘;
}
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/rixian/p/9720316.html
时间： 2024-08-28 20:44:35