Ant Design Vue Affix 固钉固定内容元素

Affix 固钉可以把内容元素固定在顶部或者顶部,当网页内容很长超过一屏滚动时固定在顶部或者底部。

Affix 属性

属性类型说明
offset-top整数当往下滚动时,对象元素距离offset-top的值时,元素将会被固定不再往下滚动。
node.js web开发环境下属性名称为offsetTop
offset-bottom整数往上滚动时, 元素将会被固定不再往上滚动
node.js web开发环境下属性名称为offsetBottom
target函数设置 Affix 需要监听其滚动事件的元素,默认() => window,如果理解不了看例子吧

Affix 事件

//html代码
<a-affix :offset-top="50" @change="change">
       <div style="height:100px;background-color:red">红色区域会被固定在距离顶部50px的位置</div>
</a-affix>
//JS代码
var app = new Vue({
    el: '#app',
    data: {
        bottom: 200
    },
    methods: {
        change(affixed) {
           if(affixed==true)
            console.log("到达固定的位置")
            else
            console.log("离开固定的位置")
        }
    }
});

在线试一试