SOURCE

var App = new Vue({
  el: "#app",
  methods: {
    change(status) {
      this.$message.info(`Status: ${status}`);
    }
  }
})

<div id="app">
  <glui-row>
    <glui-affix>
      <span class="demo-affix">
        固定在最顶部
      </span>
    </glui-affix>
  </glui-row>
  <glui-row>
    <glui-affix :offset-top="50">
      <span class="demo-affix">
        固定在距离顶部 50px 的位置
      </span>
    </glui-affix>
  </glui-row>
  <glui-row>
    <glui-affix :offset-top="100" @on-change="change">
      <span class="demo-affix">
        固定在距离顶部 100px 的位置
      </span>
    </glui-affix>
  </glui-row>
  <glui-row class="demo-buttom">
    <glui-affix :offset-bottom="20">
      <span class="demo-affix">
        固定在距离底部 20px 的位置
      </span>
    </glui-affix>
  </glui-row>
</div>

#app {
  height: calc(100vh + 500px);
  padding-top:20px;
}
.demo-buttom{
  margin-top:100vh;
}
.demo-affix {
  display: inline-block;
  color: #fff;
  padding: 10px 30px;
  text-align: center;
  background: rgba(0, 153, 229, .9);
}