当前位置:网站首页>锚点导航小demo
锚点导航小demo
2022-07-05 13:47:00 【wade3po】
锚点导航这种功能应该很常见,早之前就分享过移动端移动端导航简单实现,配合起来就很容易实现可移动的锚点导航,而且不是用hash模式。当然,PC端也能直接用。
先上效果:
为了方便直接用vue语法,首先要给每一个块一个唯一的ref,然后初始化的时候记录每一个块距离顶部的距离和每一个块的高度,并监听滚动:
this.$nextTick(() => {
this.firstOffsetTop = this.$refs[this.currentKey][0].offsetTop;
document.addEventListener('scroll', this.onScroll);
this.list.forEach((val) => {
this.itemOffsetTop.push({
key: val.key,
num: this.$refs[val.key][0].offsetTop - this.firstOffsetTop,
height: this.$refs[val.key][0].clientHeight
});
});
});
最重要的三个方法:
onScroll(){
const scrollTop = document.documentElement.scrollTop;
this.itemOffsetTop.forEach((val, index) => {
if(scrollTop > val.num && scrollTop - val.num > val.height / 2){
if(index == this.itemOffsetTop.length - 1){
this.currentKey = this.itemOffsetTop[index].key;
}else {
this.currentKey = this.itemOffsetTop[index + 1].key;
}
}else if(scrollTop < this.itemOffsetTop[0].height / 2){
this.currentKey = this.itemOffsetTop[0].key;
}
})
},
//点击锚点定位
changeKey(key){
document.removeEventListener('scroll', this.throttledScrollHandler);
this.currentKey = key;
let to = this.$refs[key][0].offsetTop - this.firstOffsetTop;
this.animationScrollTo(document.documentElement, to);
},
//锚点定位动画滚动
animationScrollTo(el, to) {
let scrollY = 0;
const beginY = el.scrollTop;
const raf = window.requestAnimationFrame || (func => setTimeout(func, 10));
const moveFn = () => {
if (beginY - to < 0) {
scrollY += (to - beginY) / 30;
if(scrollY <= (to - beginY)){
el.scrollTop = beginY + scrollY;
raf(moveFn);
}else {
el.scrollTop = to;
document.addEventListener('scroll', this.throttledScrollHandler);
}
}else if(beginY - to > 0){
scrollY += (beginY - to) / 30;
if(scrollY <= (beginY - to)){
el.scrollTop = beginY - scrollY;
raf(moveFn);
}else {
el.scrollTop = to;
document.addEventListener('scroll', this.throttledScrollHandler);
}
}
};
raf(moveFn);
}
先判断上滑还是下滑,每次滑动距离除以30,当作滑动的速度,这边注意一点,如果滑动距离为0的情况下是要处理的,否则滚动条会卡住,之前就是一个变量判断是否大于0,结果滚动条卡住了。滚动加点动画效果直接用requestAnimationFrame ,一般都兼容,如果不兼容就用定时器,定时器会比较不顺滑。
监听滚动计算滚动的距离是否大于记录的距离,且超过一半就算下一个,菜单上面定位到下一个。
完整demo:
https://github.com/wade3po/demoCode
锚点导航1.html是更简便,不过兼容性不一定更好。
边栏推荐
- Zhubo Huangyu: it's really bad not to understand these gold frying skills
- Parsing XML using Dom4j
- Summit review | baowanda - an integrated data security protection system driven by compliance and security
- Could not set property 'ID' of 'class xx' with value 'XX' argument type mismatch solution
- Usage, installation and use of TortoiseSVN
- ETCD数据库源码分析——rawnode简单封装
- Jetpack Compose入门到精通
- ETCD数据库源码分析——集群间网络层客户端peerRt
- 如何把大的‘tar‘存档文件分割成特定大小的多个文件
- Kotlin协程利用CoroutineContext实现网络请求失败后重试逻辑
猜你喜欢
Self built shooting range 2022
Laravel framework operation error: no application encryption key has been specified
How to apply the updated fluent 3.0 to applet development
STM32 reverse entry
研究生可以不用学英语?只要考研英语或六级分数高!
zabbix 监控
What is a network port
运筹说 第68期|2022年最新影响因子正式发布 快看管科领域期刊的变化
Could not set property 'ID' of 'class xx' with value 'XX' argument type mismatch solution
【公开课预告】:视频质量评价基础与实践
随机推荐
RK3566添加LED
Solve the problem of invalid uni app configuration page and tabbar
Zhubo Huangyu: these spot gold investment skills are not really bad
荐号 | 有趣的人都在看什么?
Set up a website with a sense of ceremony, and post it to the public 2/2 through the intranet
Jetpack compose introduction to mastery
redis6主从复制及集群
Record in-depth learning - some bug handling
Require, require in PHP_ once、include、include_ Detailed explanation of the efficiency of repeated introduction of once class library
Integer = = the comparison will unpack automatically. This variable cannot be assigned empty
How to deal with the Yellow Icon during the installation of wampserver
Assembly language - Beginner's introduction
Flutter 3.0更新后如何应用到小程序开发中
华为推送服务内容,阅读笔记
搭建一个仪式感点满的网站,并内网穿透发布到公网 2/2
leetcode 10. Regular Expression Matching 正则表达式匹配 (困难)
laravel-dompdf导出pdf,中文乱码问题解决
ELK 企业级日志分析系统
通讯录(链表实现)
49. Grouping of alphabetic ectopic words: give you a string array, please combine the alphabetic ectopic words together. You can return a list of results in any order. An alphabetic ectopic word is a