html滑动文章标题置顶

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

首先封装一个组件 例如：AAA组件（注意，只能有一层盒子，不能在外面继续包一层div）

 
<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>

父组件

 
<script>
import AAA from './components/aaa.vue'
export default {
  components: {
    AAA
  }
}
script>
 
<style>
.main {
  height: 40vh;
  background: #fff;
  overflow: auto;
}
style>