Ant Design Vue Affix例子
查看教程
运行代码
PC模式
平板模式
手机模式
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Ant Design Vue Affix例子</title> <script src="//www.itxst.com/package/vue/vue.min.js"></script> <script src="//www.itxst.com/package/ant-design-vue/antd.min.js"></script> <link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" /> <style> body { padding-top: 10px } #app { height: 1800px; } </style> </head> <body> <div id="app"> <div style="height:200px;background-color:#ededed"> itxst.com是一个网站,这个部分内容是不会被固定的</div> <a-affix :offset-top="50" @change="change"> <div style="height:100px;background-color:red">红色区域会被固定在距离顶部50px的位置</div> </a-affix> <div style="height:1000px;background-color:#ededed"> itxst.com是一个网站,这个部分内容是不会被固定的</div> <a-affix :offset-bottom="bottom"> <a-button type="primary">当往下滚动距离底部200px时将会被固定</a-button> </a-affix> </div> <script> var app = new Vue({ el: '#app', data: { bottom: 200 }, methods: { change(affixed) { if(affixed==true) console.log("到达固定的位置") else console.log("离开固定的位置") } } }); </script> </body> </html>
