滑动变化效果
onscroll --滑动API
它的 onscrollX，onscrollY两个值，分别表示X、Y滑动后的距离。
// js只负责通过元素中的id来操控元素的class达到效果
window.onscroll = function(xxx){
if(window.scrollY > 0){
id.calssList.add('stick')
}else{
id.classList.remove('stick')
}
console.log(window.scrollY) //打印Y坐标值
}
-
高亮当前元素
用上边代码监听滚动Y值(scrollY 滚动Y坐标)，打印出scrollY 滚动Y值坐标，发现随便页面滚动，坐标值再变化，根据坐标值变化，寻找与之最近的元素。 -
找元素
页面中三个map做标记为(data-x)，怎么能知道哪个元素最靠前，也就是离滚动的距离最近，首先拿到三个标记的元素。
window.onscroll = function(xxx){
if(window.scrollY > 0){
id.calssList.add('stick')
}else{
id.classList.remove('stick')
}
console.log('window.scrollY') //‘打印滚动Y坐标值’
console.log(window.scrollY) //滚动Y坐标值为
let 标记元素 = document.querySelectoeAll('[data-x]') // 通过选择器获取所有标记属性的元素
for( let i = 0; 标记.length; i++){ //遍历这些元素
console.log('标记[i].offsetTop')
console.log(标记[i].offsetTop) // 标记元素top值，不会随滚动高度而变化
}
}
可以计算175/947/1321哪个距离滚动坐标12最近，确定应该是哪个元素
-
计算哪个元素距离滚动坐标最近
首先设定最小值是第0个，遍历这些标记元素，从第1个开始，Math.abs求他们的绝对差值，如果i与滚动值的差值小于我们设定的最小值与滚动值的差值，那么这个i就是最小值。此时最最小值我们可以添加一个'active'来切换状态，首先消掉，然后加上，这样哪个元素最近才有active状态。
window.onscroll = function(xxx){
if(window.scrollY > 0){
id.calssList.add('stick')
}else{
id.classList.remove('stick')
}
console.log('window.scrollY') //‘打印滚动Y坐标值’
console.log(window.scrollY) //滚动Y坐标值为
let 标记元素 = document.querySelectoeAll('[data-x]') // 通过选择器获取所有标记属性的元素
let minindex = 0 //假设最小值是第0个
//循环找最小值
for( let i = 1; 标记.length; i++){ //遍历这些元素 i就从第1个开始
if(Math.abs(标记元素[i].offsetTop-window.scrollTop() < Math.abs(标记元素[minindex].offsetTop-window.scrollTop)){
minIndex = i
}
}
console.log(minIndex)
//循环添加active
//首先消掉active,然后再加上
for( let i = 0; 标记.length; i++){
标记元素[minIndex].classList.remove('active')
}
for( let i = 0; 标记.length; i++){
标记元素[minIndex].classList.add('active')
}
}
css
0
1
2
-
找a标签
现在知道哪个是离滑动top最近的元素了，怎么找到对应的a标签呢？
每个对应的a标签已经添加对应的id了，可以取得最小值的idlet id=标记元素[minIndex].id
//找到a标签
let id = 标记元素[minIndex].id
console.log(id)
let a = document.querySelector('a[href="#' + id + '"]')
//通过id获取a标签 --字符串加变量(id)加字符串
}
id
-
找a标签父级元素li标签
这时需要找到li标签给它添加active状态，找父级元素用praentNode(父节点)，然后给li标签添加active，当我们滚过了所有标记元素，发现都是高亮状态，我们需要滚动到哪里，哪里高亮，其他不高亮，这时可以先把a标签的父级元素li全部找出来，遍历所有li标签包括自己，所有先移除active，然后再添加。
let 标记元素 = document.querySelectoeAll('[data-x]') // 通过选择器获取所有标记属性的元素
let minindex = 0 //假设最小值是第0个
for( let i = 1; 标记.length; i++){ //遍历这些元素 i就从第1个开始
if(Math.abs(标记元素[i].offsetTop-window.scrollTop() < Math.abs(标记元素[minindex].offsetTop-window.scrollTop)){
minIndex = i
}
}
console.log(minIndex)
//首先消掉active,然后再加上
for( let i = 0; 标记.length; i++){
标记元素[minIndex].classList.remove('active')
}
for( let i = 0; 标记.length; i++){
标记元素[minIndex].classList.add('active')
}
//minIndex 距离窗口最近的标记元素
let id = 标记元素[minIndex].id
console.log(id)
let a = document.querySelector('a[href=#'+ id + ']') //通过id获取a标签
let li = a.praentNode //获取a父级元素li标签
let brothersAndMe= li.parentNode.children //所有li标签的儿子们，包括自己
fo(let i = 0; i<brothersAndMe.length; i++){
//ligntheight' -- 可以给状态名变个名字，效果还是active的效果，css下公用一个状态效果
brothersAndMe[i].classList.remove('ligntheight')
}
li.classList.add('active')
-
BUG1
移动标记元素高亮时，我们再hover，其实active被触发两次，当鼠标移开的时候active消失，所以高亮状态也消失了，也就是说鼠标移入再移出会影响高亮active状态。解决办法就是让它移不出，可以给状态名变个名字，效果还是active的效果，css下linghtheight和active公用一个状态效果，一个表示高亮。一个表示被hover了。
深度截图_选择区域_20180311001603.png
-
滚到到标记元素，标记元素出现由下网上缓动动画
如果哪个标记元素距离窗口最近，我们给它添加一个class。css添加[data-x].animate{添加动画},这样做体验效果不好，我们需要标记元素初始位置就再底部一定距离，触发时有下往上缓动， 解决办法就是初始状态先给所有标记元素添加一个初始位置再底部一定距离的类，触发时再消除。
//JS代码
//给所有标记元素添加相同的类
let 标记元素 = document.querySelectoeAll('[data-x]')
for( let i = 0; 标记.length; i++){
标记元素[i]classList.add('offset') //offset脱离初始位置的类名
}
}
*************************************************************************************
let 标记元素 = document.querySelectoeAll('[data-x]') // 通过选择器获取所有标记属性的元素
let minindex = 0 //假设最小值是第0个
for( let i = 1; 标记.length; i++){ //遍历这些元素 i就从第1个开始
if(Math.abs(标记元素[i].offsetTop-window.scrollTop() < Math.abs(标记元素[minindex].offsetTop-window.scrollTop)){
minIndex = i
}
}
console.log(minIndex)
//首先消掉active,然后再加上
for( let i = 0; 标记.length; i++){
标记元素[minIndex].classList.remove('active')
}
for( let i = 0; 标记.length; i++){
标记元素[minIndex].classList.add('active')
}
//minIndex 距离窗口最近的标记元素 给它添加一个class，css添加[data-x].animate{添加动画}
标记元素[minIndex].classList.remove('offset')
let id = 标记元素[minIndex].id
console.log(id)
let a = document.querySelector('a[href=#'+ id + ']') //通过id获取a标签
let li = a.praentNode //获取a父级元素li标签
let brothersAndMe= li.parentNode.children //所有li标签的儿子们，包括自己
fo(let i = 0; i<brothersAndMe.length; i++){
rothersAndMe[i].classList.remove('换的状态名')
}
li.classList.add('active')
}
*********************************************************
//css代码
//脱离初始位置
[data-x].offset{
transform: translateY(60px);
}
[data-x]{
transform: translateY(0);
transition: all 0.5s;
}
//初始位置动画效果
@keyframes zzz{
0%{
transform: translateY(-60px);
}
100%{
transform: translateY(0);
}
}
[data-x].animate{
animation: zzz 0.5s;
}
-
设置默认第一个就添加class
如果一开始就运行下下边的代码就可以了，我们可以封装成一个函数。
深度截图_选择区域_20180311005828.png
深度截图_选择区域_20180311010148.png
开始就执行一次代码
- 技能栏动画
section.skill .progressBar{
height: 5px;
border-radius: 2px;
background-color: #FAE1E1;
margin: 7px 0;
overflow: hidden; //父元素中默认隐藏
}
section.skill .progressBar .progress{
height: 100%;
background: #E6686A;
width: 50%;
border-radius: 2px;
transform: translateX(0);
transition: all 1s;
}
section.skill.offset .progress{
transform: translateX(-100%); //改变坐标
}
深度截图_选择区域_20180311011443.png
网友评论