vue 中 html 滚动吸顶
作者：互联网
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;
}
标签：vue,Name,addressId,Area,Mobile,html,Address,吸顶,isDefault 来源： https://www.cnblogs.com/moguzi12345/p/14132856.html