],
},
],
timeList: [],
};
},
methods: {
init() {
let that = this;
this.listData.map((res, i) => {
let topH = document.querySelector(.items${i}).getBoundingClientRect()
.top; // 获取每一项，底部距离文档顶部的距离
that.timeList.push(topH);
});
this.titleTime = this.listData[0].time; // 默认展示第一项日期
},
scrollTop() {
let scrollTop = document.documentElement.scrollTop + 80 / 2; // 卷去的距离
this.timeList.map((res, i) => {
if (scrollTop < this.timeList[0]) {
console.log(scrollTop);
this.titleTime = this.listData[0].time; // 第一项 日期展示
return;
}
if (scrollTop >= this.timeList[i] && scrollTop < this.timeList[i + 1]) {
console.log("区间", this.timeList[i]);
this.titleTime = this.listData[i + 1].time; // 第二项之后
}
});
},
},
mounted() {
window.addEventListener("scroll", this.scrollTop); // 监听 scroll
this.init();
},
};
.box { width: 100%; min-height: 100vh; position: relative; } .titleTimeStyle { position: fixed; background-color: #fff; width: 100%; height: 80px; line-height: 80px; font-size: 50px; } .list { min-height: 100vh; width: 100%; overflow-y: auto; padding-top: 80px; .item { width: 100%; border: 1px solid red; .data { height: 80px; line-height: 80px; font-size: 50px; background-color: #eee; } .country { height: 100px; text-align: center; } } }js写法代码有些冗余有啥好的办法咧，我们可以用css的骚操作。
css核心两段代码：
position: sticky;
top: 0;
css方法效果：
css方法完整代码：
.box { width: 100%; min-height: 100vh; position: relative; } .titleTimeStyle { position: fixed; background-color: #fff; width: 100%; height: 80px; line-height: 80px; font-size: 50px; } .list { min-height: 100vh; width: 100%; .item { top: 0; width: 100%; border: 1px solid red; .data { height: 80px; line-height: 80px; font-size: 50px; background-color: #eee; position: sticky; top: 0; } .country { height: 100px; text-align: center; } } ### 总结 秋招即将开始，校招的朋友普遍是缺少项目经历的，所以**底层逻辑，基础知识要掌握好！** 而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。 这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法**等高频考点**238道（含答案）**！ 资料截图 ：    **高级前端工程师必备资料包**  **开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
