html 带渐变的吸顶效果 vue

 

 

 

<template>
    <div id="main" class="main" v-on:scroll.passive="handleScroll">
        <div class="top">
            <span v-if="!isFixed" class="iconfont iconarrowleft-fill icon-back" @click="goBack"></span>
            <van-image width="100%" height="220" src="/src/assets/imgs/rachel.jpg" />
        </div>

        <!-- title start -->
        <div id="title-fixed" v-if="isFixed" class="title-fixed">
            <span v-if="isFixed" class="iconfont iconarrowleft-fill icon-back-fixed" :style="{'opacity': opacity}" @click="goBack"></span>
            <span :style="{'opacity': opacity}">
                Omnibus Law Introduces Special Tax Rules in Relation to the Sovereign Wealth Fund
            </span>
        </div>
        <div id="title-org" class="title">
            Omnibus Law Introduces Special Tax Rules in Relation to the Sovereign Wealth Fund
        </div>
        <!-- title end -->

        <div class="cont">
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .

            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .

            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            The favourite in a race or contest is the competitor that is expected to win. In a team game, the team that is expected to win is referred to as the favourites .
            end...end....end....end....
        </div>
        <div class="foot">
            <div class="fav">
                <span class="iconfont iconrating-outline icon-fav" @click="goBack"></span>
                <span>Favourite</span>
            </div>

            <div class="share">
                <span class="iconfont iconshare-outline icon-share" @click="goBack"></span>

                <span>Share</span>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isFixed: false, 64             opacity: 0,
        };
    },

    components: {},

    computed: {},

    mounted() {
  
    },

    methods: {
        handleScroll() {
            let scrollTop = document.getElementById("main").scrollTop;

            let title = document.getElementById("title-org");
            //获取标题元素高度
            let titleHeight = title.offsetHeight;
            //获取标题距离页面偏移高度
            let ofTop = title.offsetTop;
            console.log("scrollTop:" + scrollTop, "ofTop: " + ofTop);
            //去掉固定top 的高度，用于滚动实际计算
            let calcH = ofTop - 54;
            let opc = 0;
            //滚动高度大于实际计算的偏移高度之后，需要开始显示固定bar
            if (scrollTop >= calcH) {
                //继续滚动的时候，计算超出实际计算的高度，并计算占有实际 title 高度的百分比
                opc = ((scrollTop - calcH) * 1.0) / titleHeight;
                console.log(opc, "%");
                this.opacity = opc;
            }
            //百分比小于0之后，表明需要隐藏 固定bar
            if (opc <= 0) {
                this.isFixed = false;
            } else {
                //有透明度，表示需要显示 固定bar
                this.isFixed = true;
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        titleScroll(e) {
            console.log(e);
        },
    },
};
</script>
<style lang='less' scoped>
.main {
    overflow: auto;
    height: calc(100% - 60px);
}
.icon-back {
    display: inline-block;
    // width: 20px;
    // height: 20px;
    position: absolute;
    left: 20px;
    top: 23px;
    color: white;
    z-index: 999;
    font-size: 30px;
}
.icon-back-fixed {
    display: inline-block;
    // width: 20px;
    // height: 20px;
    position: absolute;
    left: 14px;
    top: 13px;
    color: #101010;
    z-index: 999;
    font-size: 30px;
}
.title {
    width: 330px;
    margin: 15px auto;
    font-size: 24px;
    font-weight: 450;
    color: #101010;
    padding: 0px 20px;
}
.title-fixed {
    position: absolute;
    top: 0;
    color: #7e7e7e;
    background-color: white;
    font-size: 14px;
    margin: 0 auto;
    width: calc(100% - 60px);
    padding: 10px 10px 0px 50px;
    height: 54px;
}
.cont {
    padding: 0 18px;
    font-size: 14px;
    line-height: 22px;
    word-break: break-word;
}
.foot {
    position: absolute;
    bottom: 0;
    display: flex;
    text-align: center;
    width: 100%;
    // line-height: 74px;
    padding: 20px 0;
    border-top: 1px solid #f2f2f2;
    color: #7e7e7e;
    background-color: white;
    .fav {
        flex: 1;
    }
    .share {
        flex: 1;
        border-left: 1px solid #dedede;
    }
}
</style>