原来不用better-scroll就可以实现吸顶功能,之前还一直以为,必须要用呢,面试被稳得晕头转向的
scroll事件:
文档视图或者一个元素在滚动时,会触发元素的scroll事件。
注意:在 iOS UIWebViews中, 滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。
Scroll 事件节流
由于 scroll 事件可被高频触发,事件处理程序不应该执行高性能消耗的操作,如DOM操作。而更推荐的做法是使用 requestAnimationFrame(), setTimeout()
或 CustomEvent
给事件节流,如下所述。
然而需要注意的是,输入事件和动画帧常常以差不多的频率被触发,因此以下优化常常不必要。这个例子使用 requestAnimationFrame
优化 scroll 事件。
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// 根据滚动位置做的事
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});
Vue.js中this.$nextTick()的使用
https://www.cnblogs.com/jin-zhe/p/9985436.html
吸顶实现
<script rel="script" src="vue.js"></script>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>...</li>
</ul>
<ul class="box_fixed" id="boxFixed" :class="{'is_fixed' : isFixed}"></ul>
<ul>
<li>111</li>
<li>剩下的为了实现滚动效果自己补充几个就行了,放在这里看着太麻烦了</li>
</ul>
<script>
var vm = new Vue({
el : '#boxFixed',
data() {
return {
isFixed: false,
offsetTop: 0
}
},
mounted() {
window.addEventListener('scroll', this.initHeight);//addEventListener用于向指定元素添加事件句柄
this.$nextTick(() => {
//获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
this.offsetTop = document.querySelector('#boxFixed').offsetTop;
console.log(this.offsetTop);
})
},
methods: {
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
console.log(scrollTop);
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
}
});
</script>
</body>
<style>
li{
width: 500px;
height: 40px;
margin: 0 auto;
line-height: 40px;
}
.box_fixed{
width: 500px;
height: 40px;
border: 2px dashed pink;
border-radius: 20px;
margin: 0 auto;
line-height: 40px;
background: #eeeeee;
}
.is_fixed{
position: fixed;
top: 0;
left: 400px;
z-index: 999;
}
</style>
滚动前:
滚动后吸顶:
参考:https://www.jianshu.com/p/5fc421a2f12a