vue列表项吸顶 js+css两种 骚操作

});

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();

},

};

css方法：

---

js写法代码有些冗余有啥好的办法咧，我们可以用css的骚操作。

css核心两段代码：

position: sticky;

top: 0;

css方法效果：

css方法完整代码：

{{ item.time }}

class=“country”

v-for=“(items, index) in item.country”

:key=“index”

{{ items.name }}