> 文档中心 > Vue前端实现页面吸顶效果（页面吸顶效果+对话框el-dialog顶部吸顶）

Vue前端实现页面吸顶效果（页面吸顶效果+对话框el-dialog顶部吸顶）

文档中心

实际业务中页面组件较多时，顶部的表单名或者底部的保存按钮需要置顶和置底。这就是需要实现吸顶和吸底效果（即滚动条滚动界面某一行响应式固定位置）。

1、表单界面直接实现吸顶

      固定行
    3
    2
    3
    2
    3
    2
    3
    2
    3
    2
    3
    2
    3
    2
  
export default {  name: 'Home',  data() {    return {      offsetTop: 0,      offsetHeight: 0,      headerFixed: 0    }  },  mounted() {    this.$nextTick(() => {      // 获取吸顶元素的dom      const header = this.$refs.header      // 吸顶元素到top的距离      this.offsetTop = header.offsetTop      // 元素自身的高度      this.offsetHeight = header.offsetHeight      // 监听滚动条      window.addEventListener('scroll', this.handleScroll)    })  },  destroyed() {    window.removeEventListener('scroll', this.handleScroll)  },  methods: {    handleScroll() {      // 得到页面滚动的距离，兼容写法      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop      // 判断页面滚动的距离是否大于吸顶元素的位置      this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight    }  }}.issFixed {  position: fixed;  top: 0px;  left: 0px;  right: 0px;  z-index: 4;}.header-bg {  font-size: 30px;  background-color: red;}

2、el-dialog中实现title吸顶和保存按钮吸底

      点击打开 Dialog           首行
 第一行
 第二行
 第三行
      
       取 消 保 存 确 定            
export default {  name: 'Home',  data() {    return {      dialogVisible: false    }  },  mounted() {  },  destroyed() {  },  methods: {    handleClose(done) {      this.$confirm('确认关闭？') .then(_ => {   done() }) .catch(_ => {})    }  }}/* 使顶部进行吸顶 */.top {  position: sticky;  position: -webkit-sticky;  top: 0px; }/表单 确定和取消 按钮的位置 */.el-dialog__footer {  position: absolute;  left: 0;  right: 0;  bottom: 0;}/* 表单大小设置 */.el-dialog {  margin: 0 auto !important;  height: 80%;  overflow: hidden;}.el-dialog__body {  position: absolute;  left: 0;  top: 54px;  bottom: 70px;  right: 0;  padding: 0;  z-index: 1;  overflow: hidden;  overflow-y: auto;}