梅
时间：2017-12-21 21:13:11来源：杰瑞文章网点击：作文字数：500字
作文导读：酱酱，好久不见鸭！
前言：吸顶效果图：
1、滚动前：
image.png
2、滚动中：
image.png
3、滚动超过后：
image.png
直观效果可参pc端微博左侧的信息栏
第一步：html 中：
在你要实现吸顶效果的div上，加上如下这一行代码：
image.png
下方代码自取↓
:class="{'is_fixed' : isFixed}"
触发吸顶效果的位置，如下：
image.png
下方代码自取↓
第二步：data 定义中：
image.png
下方代码自取↓
data() {
return {
isFixed: false,
offsetTop: 0,
}
}
第三步：在 mounted 与 destroyed 中
mounted() {
window.addEventListener('scroll', this.initHeight);
this.$nextTick(() => {
//获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
})
},
//回调中移除监听
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
第四步：在 methods 方法定义中：
/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/
最后一步：在css中：
.is_fixed{
width: 100%;
position: fixed;
top: 0;
z-index: 999;
}
大功告成，感谢博文：
https://www.jianshu.com/p/5fc421a2f12a
前言：吸顶效果图：
1、滚动前：
image.png
2、滚动中：
image.png
3、滚动超过后：
image.png
直观效果可参pc端微博左侧的信息栏
第一步：html 中：
在你要实现吸顶效果的div上，加上如下这一行代码：
image.png
下方代码自取↓
:class="{'is_fixed' : isFixed}"
触发吸顶效果的位置，如下：
image.png
下方代码自取↓
第二步：data 定义中：
image.png
下方代码自取↓
data() {
return {
isFixed: false,
offsetTop: 0,
}
}
第三步：在 mounted 与 destroyed 中
mounted() {
window.addEventListener('scroll', this.initHeight);
this.$nextTick(() => {
//获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
})
},
//回调中移除监听
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
第四步：在 methods 方法定义中：
/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/
最后一步：在css中：
.is_fixed{
width: 100%;
position: fixed;
top: 0;
z-index: 999;
}
大功告成，感谢博文：
https://www.jianshu.com/p/5fc421a2f12a
酱酱，好久不见鸭！
前言：吸顶效果图：
1、滚动前：
image.png
2、滚动中：
image.png
3、滚动超过后：
image.png
直观效果可参pc端微博左侧的信息栏
第一步：html 中：
在你要实现吸顶效果的div上，加上如下这一行代码：
image.png
下方代码自取↓
:class="{'is_fixed' : isFixed}"
触发吸顶效果的位置，如下：
image.png
下方代码自取↓
第二步：data 定义中：
image.png
下方代码自取↓
data() {
return {
isFixed: false,
offsetTop: 0,
}
}
第三步：在 mounted 与 destroyed 中
mounted() {
window.addEventListener('scroll', this.initHeight);
this.$nextTick(() => {
//获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
})
},
//回调中移除监听
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
第四步：在 methods 方法定义中：
/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/
最后一步：在css中：
.is_fixed{
width: 100%;
position: fixed;
top: 0;
z-index: 999;
}
大功告成，感谢博文：
https://www.jianshu.com/p/5fc421a2f12a
喜欢这篇记叙文，就猛击分享!
梅一文由杰瑞文章网免费提供，本站为公益性作文网站，此作文为网上收集或网友提供，版权归原作者所有，如果侵犯了您的权益，请及时与我们联系，我们会立即删除！
杰瑞文章网友情提示：请不要直接抄作文用来交作业。你可以学习、借鉴、期待你写出更好的作文。
和梅相关的作文：
-
无相关信息