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>
相关推荐
GISer_Jing5 分钟前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html
长空任鸟飞_阿康8 分钟前
提示词管理器设计:从需求到用户体验的高效落地逻辑
前端·人工智能·ux
零點壹度ideality15 分钟前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
林希_Rachel_傻希希17 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Helloworld18 分钟前
掌握 JavaScript 的“变色龙”——this 关键字完全指南
javascript
Komorebi゛19 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket
想要狠赚笔的小燕19 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
用户3521201956025 分钟前
React-router v7(下)
前端
枫,为落叶25 分钟前
【vue】设置时间格式
前端·javascript·vue.js
渣哥31 分钟前
对象居然不用自己创建?Spring 依赖注入机制的真相惊呆了!
javascript·面试·github