js吸顶效果与布局

项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题

常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动

解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定

注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的

html:

   

       

           

吸顶内容

       

   

   

           

           

               

                   

                   

                       

                        不吸顶时展示的内容

                       

                   

               

               

                   

                       

                           

                                加载内容

                           

                           

                                {{loadText}}

                           

                       

                   

                   

最新达成情况正在更新中...请稍后再来～

               

           

       

   

   

底部固定

js:

data: {

    return {

        busy: false,

        pageNum: 1,

        pageSize: 10,

        loading: false，

        noData: false,

        infoList: []

    }

}

mounted() {

    that.$nextTick(() => {

        let scrollDOM = document.querySelector('.flexContent')

        scrollDOM.addEventListener('scroll',that.handleScroll)

    })

},

methods: {

    handleScroll () {

        let scrollDOM = document.querySelector('.flexContent')

        let scrollTop = scrollDOM.scrollTop;

       

        let clientHeight = document.documentElement.clientHeight

        if (scrollTop > document.querySelector('.banner').offsetHeight) {

            this.is_fixed = true;

        } else {

            this.is_fixed = false;

        }

    },

   

    loadMore() {

        if(this.pageNum

            this.loading = true

            this.pageNum+=1

            this.busy = true

            this.loadData(接口参数,this.pageNum)

        }

    },

    //加载时触发的接口调用

    loadData() {

        api.XXX({},function(success,data,err){

            if(success) {

                if(data.status==200) {

                //加载逻辑判断

                    if(data.body.list.length>0 && pageNum>0){

                        that.infoList = that.infoList.concat(data.body.list)

                        that.loading = false

                    }

                    if(pageNum==data.body.pages || data.body.list<20) {

                        that.loading = true

                        that.loadText = '没有更多数据了'

                    }

                    if(pageNum==1 && data.body.list.length==0) {

                        that.noData = true

                        that.infoList = []

                    }

                }

            }

        })

    }

}

css:

.isFixed {

    width: 100%;

    height: 1rem;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 100;

}

.myScroll {

    height: 100%;

}

.wrap {

    width: 7.5rem;

    margin: auto;

    height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.flex {

    flex: 1;

}

.wrapTop {

            padding-top:0.45rem;

 }

.flexWrap {

    width: 100%;

    height: 100%;

}

.flexContent {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: scroll;

    -webkit-overflow-scrolling: touch;

}

.top {

    .banner {

        position: relative;

        img {

            width: 100%;

            display: block;

        }

        .month {

            position: absolute;

            bottom: 0.33rem;

            left: 0.45rem;

            color: #fff;

            font-size: 0.45rem;

        }

    }

}

.scrollContent {

    width: 100%;

    background: #fff;

    flex: 1;

    -webkit-overflow-scrolling: touch;

    .memberList {

        height: 100%;

        padding-top: 0.2rem;

    }

}

.footer {

    position: fixed;

    bottom: 0;

    width:7.5rem;

    margin: auto;

    height:auto;

    background:rgba(0,0,0,.7);

}