页面下拉，元素悬浮置顶实现

目录

实现技术

实现目标

实现演示

演示说明

实现步骤

注意事项

结语

---

实现技术

vue2、js原生命令（ps:vue3只是操作dom些许不同，可自行百度）

实现目标

页面初始时，元素保持原有位置；页面下拉时，元素置顶

实现演示

演示说明

页面中操作框，在下拉到一定高度时，闪了一下，然后变为悬浮状态

实际实现为：由初始flex布局变为flxed布局

实现步骤

step1:

目标：初始页面布局，保证一开始的显示无问题

实现：

.flex-content {
  // position: static; //此处加不加样式没啥区别
}

step2:

目标：页面下拉时，悬浮flxed布局

实现：

.flxed-content {
  position: fixed;
  z-index: 999;
}

step3:

目标：添加两种布局切换逻辑

实现：通过this.$refs.toolbarDom监听dom元素

注意事项

1、切换为flxed布局后，可能会导致页面多出一个下拉条，具体看你布局

若多出一个下拉条，会导致悬浮框宽度不一致问题，此情况下，则要手动指定悬浮框width，

可以通过监视一个标准框的clientWidth，手动指定该悬浮框宽度的方法解决

this.$refs.titleDom?.clientWidth

2、若频繁进行宽度计算，则需要添加页面防抖，避免页面卡顿，此处使用lodash

mounted() {
    this.observer = new ResizeObserver(_.debounce(this.handleScroll, 200));
    this.observer.observe(this.$refs.titleDom); //此处titleDom元素为标准元素
}
unmounted() {
    this.observer.disconnect();
}

结语

以上仅为关键操作简述，作为处理该问题思路