time: “1.10”,
country: [
{ name: “加拿大” },
{ name: “哥伦比亚” },
{ name: “巴西” },
{ name: “巴拉圭” },
{ name: “阿根廷” },
],
},
],
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();
},
};
js写法代码有些冗余有啥好的办法咧,我们可以用css的骚操作。
css核心两段代码:
position: sticky;
top: 0;
css方法效果:
css方法完整代码:
{{ item.time }}
class=“country”
v-for=“(items, index) in item.country”
:key=“index”
{{ items.name }}