关于scroll的介绍和封装可以在另一篇博客里找到，这里介绍四个常用的基于scroll的小案例
首先再说明其中用到的封装好的两个函数（scroll封装，缓动动画封装）
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}//缓动动画封装
function animate(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target-ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},18);1、固定导航栏
需求：导航栏位于第二个盒子中，当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，让第二个盒子固定在浏览器的顶部位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
#Q-nav1 {
overflow: hidden;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<!--引入工具js即上面说的两个封装函数-->
<script src="my.js"></script>
<script>
window.onload = function () {
//1.获取事件源绑定事件
var topDiv = document.getElementById("top");
var height = topDiv.offsetHeight;
var middle = document.getElementById("Q-nav1");
var main = document.getElementById("main");
window.onscroll = function () {
//2.判断 ，被卷曲的头部的大小
if(scroll().top > height){
//3.满足条件添加类，否则删除类
middle.className += " fixed";
//第二个盒子不占位置了，所以我们给第三个盒子一个上padding占位置，不出现盒子抖动问题
main.style.paddingTop = middle.offsetHeight+"px";
}else{
middle.className = "";
//清零
main.style.paddingTop = 0;
}
}
}
</script>
</head>
<body>
<div class="top" id="top">
<img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
<img src="images/main.png" alt=""/>
</div>
</body>
</html>2、广告跟随
需求：屏幕滚动多少，两侧的图片联动向下移动等距离
js部分代码：
扫描二维码关注公众号，回复：
10417243 查看本文章
<script>
window.onload = function () {
//1.老三步
var imgArr = document.getElementsByTagName("img");
window.onscroll = function () {
//2.获取被卷去的头部的值
var val = scroll().top;
//3.移动两个盒子。（缓动移动，80为本来在页面中的位置）
animate(imgArr[0],val+80);
animate(imgArr[1],val+80);
}
}
</script>3、点击右下角的图片，使屏幕缓慢移动到最顶端
需求：被卷去的头部超过200显示图片小火箭，然后点击小火箭屏幕缓慢移动到最顶端
难点：前面是根据屏幕位置移动盒子，现在是移动屏幕。需要用到技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
css部分
<style>
img {
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
display: none;
border: 1px solid #000;
}
div {
width: 1210px;
margin: 100px auto;
text-align: center;
font: 500 26px/35px "simsun";
color: red;
}
</style>js部分的代码：（对应的HTML略）
<script src="animate.js"></script>
<script>
window.onload = function () {
//1.老三步
var img = document.getElementsByTagName("img")[0];
window.onscroll = function () {
//被卷去的距离大于200显示小火箭，否则隐藏
//2.显示隐藏小火箭
if(scroll().top>200){
img.style.display = "block";
}else{
img.style.display = "none";
}
//每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
leader = scroll().top;
}
//3.缓动跳转到页面最顶端（利用我们的缓动动画）
var timer = null;
var target = 0; //目标位置
var leader = 0; //显示区域自身的位置
img.onclick = function () {
//技术点：window.scrollTo(0,0);
//要用定时器，先清定时器
clearInterval(timer);
timer = setInterval(function () {
//获取步长
var step = (target-leader)/10;
//二次处理步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader +step;
//显示区域移动
window.scrollTo(0,leader);
//清除定时器
if(leader === 0){
clearInterval(timer);
}
},25);
}
}
</script>4、楼层跳跃
需求：屏幕内容很长，点击左侧导航小图标，屏幕会滑动到对应的的范围。（淘宝等购物网站常用）
如图所示：
html结构：点击ol中的li，控制ul中的li (ul一个li占一个屏幕大小）
<ul>
<li>鞋子区域</li>
<li>袜子区域</li>
<li>裤子区域</li>
<li>裙子区域</li>
<li>帽子区域</li>
</ul>
<ol>
<li>鞋子</li>
<li>袜子</li>
<li>裤子</li>
<li>裙子</li>
<li>帽子</li>
</ol>css结构
<style>
* {
margin: 0;
padding: 0;
}
body,html {
height: 100%;
}
ul {
list-style: none;
height: 100%;
}
ul li {
height: 100%;
}
ol {
list-style: none;
position: fixed;
top: 80px;
left: 50px;
}
ol li {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
margin-top: -1px;
cursor: pointer;
}
</style>JS部分
<script src="animate.js"></script>
<script>
//0.获取元素
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLiArr = ul.children;
var olLiArr = ol.children;
var target = 0;var leader = 0;var timer = null;
//1.指定ul和ol中的li的背景色，对应的li背景色相同
//设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
var arrColor = ["pink","blue","yellow","orange","green"];
//利用for循环给两个数组的元素上色
for(var i=0;i<arrColor.length;i++){
//上色
ulLiArr[i].style.backgroundColor = arrColor[i];
olLiArr[i].style.backgroundColor = arrColor[i];
//属性绑定索引值
olLiArr[i].index = i;
//2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
olLiArr[i].onclick = function () {
//***获取目标位置
//获取索引值。
target = ulLiArr[this.index].offsetTop;
//要用定时器，先清除定时器
clearInterval(timer);
//3.利用缓动动画原理实现屏幕滑动
timer = setInterval(function () {
//(1).获取步长
var step = (target-leader)/10;
//(2).二次处理步长
step = step>0?Math.ceil(step):Math.floor(step);
//(3).屏幕滑动
leader = leader + step;
window.scrollTo(0,leader);
//(4).清除定时器
if(Math.abs(target-leader)<=Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},25);
}
}
//4.用scroll事件模拟盒子距离最顶端的距离。
window.onscroll = function () {
//每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
leader = scroll().top;
}
</script>自己设计界面的时候这四个都可以应用上去，修改相关的参数和HTML结构、css样式即可，实用性还挺强的，而且用户体验很好，很便利
