vue 中 html 滾動吸頂
阿新 • • 發佈：2020-12-14
1、template：
<div class="my_address" id="searchBar"> <div class="van_list" v-if="addressList.length == 0">No more data</div> <div v-else class="my_address_list"> <div :class="searchBarFixed == true ? 'add_btn_div isFixed' :'add_btn_div'"> <el-button class="add_btn" size="mini" type="primary" @click="add_address()">Add Address</el-button> </div> <div class="my_address_list_tit"> <ul> <li class="name">Name</li> <li class="tel">Mobile</li> <li class="area">Area</li> <li class="deatils">Address</li> <li class="didefu">isDefault</li> <li class="edit">edit</li> </ul> </div> <div class="my_address_list_cont"> <ul v-for="(item, index) in addressList" :key="index"> <li class="name">{{item.Name}}</li> <li class="tel">{{item.Mobile}}</li> <li class="area">{{item.Area}}</li> <li class="deatils">{{item.Address}}</li> <li class="didefu"> <span class="morenadd" v-if="item.isDefault == 1">default address</span> <span class="nomorenadd" @click="change_isDefault(item.addressId)" v-if="item.isDefault == 0">set as Default</span> </li> <li class="edit" style="color: #f30;" @click="edits(item)">edit</li> </ul> </div> </div> </div>
2、data：
searchBarFixed: false, addressList: [ {addressId: '1000001', Name: 'aaaaa1', Mobile: '13200000001', Area: '福建省廈門市', Address: '湖裡區1號', isDefault: 1}, {addressId: '1000002', Name: 'aaaaa2', Mobile: '13200000002', Area: '福建省廈門市', Address: '湖裡區2號', isDefault: 0}, {addressId: '1000003', Name: 'aaaaa3', Mobile: '13200000003', Area: '福建省廈門市', Address: '湖裡區3號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, {addressId: '1000006', Name: 'aaaaa6', Mobile: '13200000006', Area: '福建省廈門市', Address: '湖裡區1號', isDefault: 0}, {addressId: '1000002', Name: 'aaaaa2', Mobile: '13200000002', Area: '福建省廈門市', Address: '湖裡區2號', isDefault: 0}, {addressId: '1000003', Name: 'aaaaa3', Mobile: '13200000003', Area: '福建省廈門市', Address: '湖裡區3號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, {addressId: '1000007', Name: 'aaaaa7', Mobile: '13200000001', Area: '福建省廈門市', Address: '湖裡區1號', isDefault: 0}, {addressId: '1000002', Name: 'aaaaa2', Mobile: '13200000002', Area: '福建省廈門市', Address: '湖裡區2號', isDefault: 0}, {addressId: '1000003', Name: 'aaaaa3', Mobile: '13200000003', Area: '福建省廈門市', Address: '湖裡區3號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, {addressId: '1000007', Name: 'aaaaa7', Mobile: '13200000001', Area: '福建省廈門市', Address: '湖裡區1號', isDefault: 0}, {addressId: '1000002', Name: 'aaaaa2', Mobile: '13200000002', Area: '福建省廈門市', Address: '湖裡區2號', isDefault: 0}, {addressId: '1000003', Name: 'aaaaa3', Mobile: '13200000003', Area: '福建省廈門市', Address: '湖裡區3號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, {addressId: '1000007', Name: 'aaaaa7', Mobile: '13200000001', Area: '福建省廈門市', Address: '湖裡區1號', isDefault: 0}, {addressId: '1000002', Name: 'aaaaa2', Mobile: '13200000002', Area: '福建省廈門市', Address: '湖裡區2號', isDefault: 0}, {addressId: '1000003', Name: 'aaaaa3', Mobile: '13200000003', Area: '福建省廈門市', Address: '湖裡區3號', isDefault: 0}, {addressId: '1000004', Name: 'aaaaa4', Mobile: '13200000004', Area: '福建省廈門市', Address: '湖裡區4號', isDefault: 0}, {addressId: '1000005', Name: 'aaaaa5', Mobile: '13200000005', Area: '福建省廈門市', Address: '湖裡區5號', isDefault: 0}, ],View Code
3、頁面載入監聽滾動事件：
mounted() { window.addEventListener('scroll', this.handleScroll); },
4、頁面銷燬移除監聽：
destroyed() { window.removeEventListener('scroll', this.handleScroll); },
5、methods：
handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //獲取頁面滾動位置 var offsetTop = document.querySelector('#searchBar').offsetTop; // 獲取 div 初始位置 if (scrollTop > offsetTop) { //判斷高度 this.searchBarFixed = true; } else { this.searchBarFixed = false; } },
6、style ：
.isFixed{ position: fixed; background-color: #Fff; top: 0; width: 1200px !important; margin: auto; z-index: 3; }