html滑动文章标题置顶

position: sticky; 基于用户的滚动位置来定位

首先封装一个组件 例如:AAA组件(注意,只能有一层盒子,不能在外面继续包一层div)

javascript 复制代码
<template>
  <div class="box">
    {{title}}
  </div>
</template>

<script>
export default {
  props: {
    title: {
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  border: 1px solid red;
  font-weight: bold;
  font-size: 20px;
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 99;
}
</style>

父组件

javascript 复制代码
<template>
  <div class="main">
    <AAA title="1.学不会" />
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <AAA title="2.学不会" />
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <AAA title="3.学不会" />
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
    <p>1232311223121233212131232</p>
  </div>
</template>

<script>
import AAA from './components/aaa.vue'
export default {
  components: {
    AAA
  }
}
</script>

<style>
.main {
  height: 40vh;
  background: #fff;
  overflow: auto;
}
</style>
相关推荐
一涯几秒前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调8 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab8 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined29 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
用户7579419949701 小时前
基于JavaScript的简易Git
javascript
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor