页面进度条和元素固定位置

1、页面进度条：当滚动条在页面中滚动时，页面上部会出现等比例的颜色填充效果。

 <div class="progress"> </div> //制作进度条<div style="height: 500px;"></div> <div class="demo"></div>//需要固定位置的页面元素<div class="item"></div>

 *{margin: 0;padding: 0;
}.progress{width: 0px;height: 10px;background-color: red;border-radius: 5px;position: fixed;  /*固定定位*/top: 0;left: 0;z-index: 1; 
}
.item{height: 2000px;
}
.demo{/*给需要滑动到一定位置，固定的元素添加样式*/height: 100px;width: 100%;background-color: palegreen;top: 0;/* 当没有定位是top和left没有作用 */
}

 <script>let demo=document.querySelector('.demo')let topp=demo.offsetTop //有色框距离body上边框的距离window.onscroll=function(){//页面滚动条事件let scroll=Math.floor(document.documentElement.scrollTop) //滚动条距离顶部的距离let maxScr=document.body.offsetHeight-window.innerHeight  //滚动条能够达到的最大长度（即body的高度减去页面的高度）innerHeight：返回页面可见区的高度。let percent=(scroll*100/maxScr)+'%'  //比例关系document.querySelector('.progress').style.width=percentif(scroll>topp){//当滚动条距离顶部的距离大于了有色框距离body上边框的距离，就让页面固定。demo.style.position='fixed'}else{demo.style.position='static' //static为定位的默认值}}
</script>

2、音频播放的进度条制作
首先定义一些方法：

let _ = {  //_作为对象名repairZero(num) {//判断数字是否存在第二位，若存在则直接输出，若不存在则加‘0’输出num = num.toString()return num[1] ? num : ('0' + num)},makeStr() {//call()改变指向，arguments是将传过来的参数变成一个类数组，但是无法使用数组的方法。let code = Array.prototype.shift.call(arguments) //call将数组方法中的shift方法指向了括号中的参数，使得参数可以借用数组的方法return Array.prototype.join.call(arguments, code)},convertSec2Str(total) {//制作类似于00:00这样的时间格式let min = _.repairZero(Math.floor(total / 60))let sec = _.repairZero(Math.floor(total % 60))return _.makeStr(':', min, sec)}
}

接下来页面布局：（按钮的制作以及音频进度条）

  <audio id="player" src="./mp3/demo.mp3"></audio>//音频<div class="play">播放</div>//播放按钮<div class="container"><div class="progress"></div>//进度条</div><div class="time"></div> //时间显示

 <style>* {margin: 0;padding: 0;}.container {height: 10px;width: 500px;background-color: #ccc;border-radius: 5px;overflow: hidden;margin-top: 50px;}.progress {height: 100%;width: 0%;background-color: orangered;}.play {width: 100px;height: 100px;line-height: 100px;text-align: center;border-radius: 50%;cursor: pointer;background-color: palegreen;box-shadow: 4px 4px 5px #333;}</style>

对页面元素进行控制：

 <script>function $(selector) {return document.querySelector(selector)}//获取页面元素let progress = $('.progress')let container = $('.container')let player = $('#player')let time = $('.time')player.oncanplay = function () {//视频先加载，对时间进行初始化time.innerHTML = `00:00/${ _.convertSec2Str(player.duration)}`}$('.play').onclick = function () {if (this.innerHTML === '播放') {player.play()//如果播放按钮内容是‘播放’,点击后视频开始播放并将内容换成'暂停'this.innerHTML = '暂停'} else {player.pause()//音频停止函数this.innerHTML = '播放'}}let timer = setInterval(function () {//使用定时器let i = (player.currentTime / player.duration) * 100;//player.currentTime是音频播放时的秒数；player.duration:视频的总秒数let a = _.convertSec2Str(player.currentTime) + '/' + _.convertSec2Str(player.duration)//将获取到的时间制作成00:00/00:00这样的字符串，以显示已播放时长/总时长time.innerHTML = aif (i == 100) {//当音频播放结束，音频暂停并重置，按钮内容为播放i = 0player.pause()$('.play').innerHTML = '播放'}progress.style.width = i + '%'//进度条的百分比}, 1000)</script>

3、使用鼠标进行翻屏（当鼠标滑动一下，变换整个可见区域页面）
页面布局：（包含5个子div，并对里面的每个div设置样式）

  <div class="container"><div style="background-color: palegreen;"></div><div style="background-color: palevioletred;"></div><div style="background-color: peru;"></div><div style="background-color: royalblue;"></div><div style="background-color: seagreen;"></div></div>

 <style>*{margin: 0;padding: 0;}body{height: 100vh;//高度为满屏overflow: hidden;//超出部分（滚动条）隐藏}.container{transform: translateY(0vh);transition: all 0.5s linear;//过渡效果}.container div{height: 100vh;//每一个子div高度均为满屏}</style>

 <script>let i=0;let container=document.querySelector('.container')let endtime=new Date()  //节流（多次触发只会算一次）window.onmousewheel=function(e){//鼠标滑动事件if(new Date()-endtime<500) return;//当上一次滑动时间与第二次之间小于500ms时，则页面不滚动（多次操作无用）if(e.wheelDeltaY<0){  //鼠标滑动页面的距离，若向下距离为负值，否则为正值（用来判断鼠标滑动的方向）if(i===4) return; //默认在第一个div上，所以最多向下滑动div个数减一i++}else{if(i==0) returni--}container.style.transform=`translateY(-${i*100}vh)`endtime=new Date()}</script>