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},
                ],

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;
}