zoukankan      html  css  js  c++  java
  • 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;
         1200px !important;
        margin: auto;
        z-index: 3;
    }
  • 相关阅读:
    POJ 1953 World Cup Noise
    POJ 1995 Raising Modulo Numbers (快速幂取余)
    poj 1256 Anagram
    POJ 1218 THE DRUNK JAILER
    POJ 1316 Self Numbers
    POJ 1663 Number Steps
    POJ 1664 放苹果
    如何查看DIV被设置什么CSS样式
    独行DIV自适应宽度布局CSS实例与扩大应用范围
    python 从入门到精通教程一:[1]Hello,world!
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/14132856.html
Copyright © 2011-2022 走看看