首页 >> js开发 >> jsvue滑动吸顶及锚点定位的示例代码js大全
jsvue滑动吸顶及锚点定位的示例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
在上篇文章给大家介绍了vue实现吸顶、锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https:///article/172365.htmhttps:///article/172365.htm今天给大家继续分享vue滑动吸顶及锚点定位的代码,具体内容如下所示:Vue项目中需要实现滑动吸顶以及锚点定位功能。template代码如下:
(1)滑动吸顶:监听scroll事件,获取页面的滚动距离,一旦滚动距离大于目标值,实现滑动吸顶功能。
public isFixed = false;
public mounted() {
this.menuTop = (document.getElementById('menu') as any).offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
public handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滑动距离
if (scrollTop < this.menuTop ) {
this.isFixed = false;
} else {
this.isFixed = true; // 设置fixed定位
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
public isFixed = false;
public mounted() {
this.menuTop = (document.getElementById('menu') as any).offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
public handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滑动距离
if (scrollTop < this.menuTop ) {
this.isFixed = false;
} else {
this.isFixed = true; // 设置fixed定位
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}(2)锚点定位。点击tab,设置页面滚动距离。
public clickTab(index: number) {
this.activeIndex = index;
this.isFixed = true;
const menuHeight= (document.getElementById('menu') as any).offsetHeight;
const div1= (document.getElementById('div1') as any).offsetTop;
const div2= (document.getElementById('div2') as any).offsetTop;
const div3= (document.getElementById('div3') as any).offsetTop;
const div4= (document.getElementById('div4') as any).offsetTop;
switch (index) {
case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
}
}
public clickTab(index: number) {
this.activeIndex = index;
this.isFixed = true;
const menuHeight= (document.getElementById('menu') as any).offsetHeight;
const div1= (document.getElementById('div1') as any).offsetTop;
const div2= (document.getElementById('div2') as any).offsetTop;
const div3= (document.getElementById('div3') as any).offsetTop;
const div4= (document.getElementById('div4') as any).offsetTop;
switch (index) {
case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
}
}总结总结总结
(1)滑动吸顶:监听scroll事件,获取页面的滚动距离,一旦滚动距离大于目标值,实现滑动吸顶功能。
public isFixed = false;
public mounted() {
this.menuTop = (document.getElementById('menu') as any).offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
public handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滑动距离
if (scrollTop < this.menuTop ) {
this.isFixed = false;
} else {
this.isFixed = true; // 设置fixed定位
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
public isFixed = false;
public mounted() {
this.menuTop = (document.getElementById('menu') as any).offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
public handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滑动距离
if (scrollTop < this.menuTop ) {
this.isFixed = false;
} else {
this.isFixed = true; // 设置fixed定位
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}(2)锚点定位。点击tab,设置页面滚动距离。
public clickTab(index: number) {
this.activeIndex = index;
this.isFixed = true;
const menuHeight= (document.getElementById('menu') as any).offsetHeight;
const div1= (document.getElementById('div1') as any).offsetTop;
const div2= (document.getElementById('div2') as any).offsetTop;
const div3= (document.getElementById('div3') as any).offsetTop;
const div4= (document.getElementById('div4') as any).offsetTop;
switch (index) {
case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
}
}
public clickTab(index: number) {
this.activeIndex = index;
this.isFixed = true;
const menuHeight= (document.getElementById('menu') as any).offsetHeight;
const div1= (document.getElementById('div1') as any).offsetTop;
const div2= (document.getElementById('div2') as any).offsetTop;
const div3= (document.getElementById('div3') as any).offsetTop;
const div4= (document.getElementById('div4') as any).offsetTop;
switch (index) {
case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
}
}总结总结总结
相关文章:
- jsElement Breadcrumb 面包屑的使用方法js大全
- js代码全面解析JavaScript Module模式
- JavaScriptthree.js欧拉角和四元数的使用方法
- js关于angular浏览器兼容性问题的解决方案js大全
- jsElement Input输入框的使用方法js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全