案例1:中部导航吸顶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸顶</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
img{
vertical-align: top;
width: 100%;
}
section{
width: 70%;
margin: 0 auto;
}
.nav{
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<header id="head">
<img src="image/top.png">
</header>
<nav id="nav"> <!-- <nav> 标签定义导航链接的部分-->
<img src="image/nav.png">
</nav>
<section> <!-- <section> 标签定义了文档的某个区域-->
<img src="image/body01.png">
<img src="image/body02.png">
</section>
<script src="工具/Tool.js"></script>
<script>
window.addEventListener('load',function () {
//需要吸顶的东西距离网页顶部的高度
var Height = Tool.$('nav').offsetTop;
//监听页面滚动
window.addEventListener('scroll',function () {
var Sheight = Tool.scroll().top;
//判断
if (Sheight >= Height ){
Tool.$('nav').className = 'nav';
}
else {
Tool.$('nav').className = '';
}
})
})
</script>
</body>
</html>
案例2:侧边广告
广告触顶之后就会弹回原位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧边广告</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
#aside{
width: 100px;
position: absolute;
left: 0;
top: 150px;
}
#aside img{
width: 100%;
}
p{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<!--广告触顶之后就会弹回原位-->
<div id="aside">
<img src="image/float.jpg">
</div>
<div>
<p>上课</p> <p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p> <p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
<p>上课</p> <p>上课</p><p>上课</p><p>上课</p><p>上课</p>
</div>
<script src="工具/Tool.js"></script>
<script>
window.addEventListener('load',function () {
var Height = Tool.$('aside').offsetTop;
var begin = 0, end = 0, ding = null;
window.addEventListener('scroll',function () {
clearInterval(ding);
var Sheight = Tool.scroll().top;
end = Height + Sheight;
ding = setInterval(function () {
begin += (end - begin) * 0.2;
Tool.$('aside').style.top = begin + 'px';
if (Math.round(begin) === end){
clearInterval(ding);
}
},20)
})
})
</script>
</body>
</html>
案例3:返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #CCCCCC;
}
p{
text-align: center;
line-height: 40px;
}
#top{
width: 43px;
height: 43px;
background: url("image/top(1).png") no-repeat;
background-size: 100% 100%;
position: fixed;
right: 10px;
bottom: 30px;
display: none;
}
</style>
</head>
<body>
<span id="top"></span>
<div>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
<p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
</div>
<script src="工具/Tool.js"></script>
<script>
window.addEventListener('load',function (ev) {
var scroll = 0;//滚动高度
var begin = 0, end = 0, ding = null;
var top = Tool.$('top');
window.addEventListener('scroll',function (ev1) {
scroll = Tool.scroll().top;
if (scroll > 0){
top.style.display = 'block';
}
else {
top.style.display = 'none';
}
begin = scroll;
});
//监听top的点击,做缓动动画
Tool.$('top').addEventListener('click',function (ev) {
clearInterval(ding);
ding = setInterval(function () {
begin += (end - begin) * 0.2;
scrollTo(0,begin);//回到顶部
// 再一次清除定时器,不清会出错
if (Math.round(begin) === end){
clearInterval(ding);
}
},20)
})
})
</script>
</body>
</html>