页面滑动元素标题吸顶

最新推荐文章于 2024-07-03 16:58:30 发布

martinlpy

最新推荐文章于 2024-07-03 16:58:30 发布

阅读量82

点赞数

文章标签： windows 前端 javascript

本文链接：https://blog.csdn.net/m0_69045017/article/details/133351506

版权

<p>{{currentTop}}</p>

</div>

<div

class="record-list-wrap"

v-if="list.length>0"

<div

class="record-list-item"

v-for="(item,index) in list"

:key="index"

<div class="month">{{item.month}}</div>

<div

class="data-item"

v-for="(item1,index1) in item.dataList"

:key="index1"

</div>

<span class="remark">备注：{{item1.txt}}

</span>

</div>

</template>

export default {

data() {

return {

currentTop: "2022年5月",

currentIndex: 0,

list: [],

listHeight: [],

};

mounted() {

this.init();

this.$nextTick(() => {

if (this.list.length == 0) return;

this.getBoxHeight();

});

window.addEventListener("scroll", this.handleScroll); // 监听页面滚动

methods: {

getBoxHeight() {

setTimeout(() => {

//延时计算元素的高度

let rightItems = document.getElementsByClassName("record-list-item"); //获取指定类名的所有元素

let height = 0;

this.listHeight.push(height);

for (let i = 0; i < rightItems.length; i++) {

let item = rightItems[i]; // 右边的每一个模块（蓝色标题 + 标题下面所带的内容）

height += item.clientHeight;

this.listHeight.push(height); // 把右边模块内容的高度全都放到一个数组中

}

this.list.forEach((item, index) => {

// 把上面弄的那些高度分别放入总数据中，方便点击左边让右边滚动到所对应的模块

this.$set(item, "distance", this.listHeight[index]);

});

}, 1000); //增加延时，等图片渲染完毕后进行计算

handleScroll() {

let scrollTop =

window.pageYOffset ||

document.documentElement.scrollTop ||

document.body.scrollTop;

if (scrollTop == 0) this.currentIndex = 0;

this.listHeight.forEach((v, index) => {

let end = this.listHeight[index + 1]; // 右边模块内容的高度

let start = this.listHeight[index]; // 右边模块内容的高度

if (scrollTop > start && scrollTop < end) {

this.currentIndex = index;

this.currentTop = this.list[index].month;

}

});

// 初始化数据

init() {

this.list = [

{

month: "2022年5月",

dataList: [

{

num: 10,

txt: "文案文案文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案文案文案文案文案文案文案文案文案",

{

month: "2022年4月",

dataList: [

{

num: 10,

txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",

{

month: "2022年3月",

dataList: [

{

num: 10,

txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",

{

num: 10,

{

num: 10,

{

month: "2022年2月",

dataList: [

{

num: 10,

{

month: "2022年1月",

dataList: [