1 <template>
2 <div id="main" class="main" v-on:scroll.passive="handleScroll">
3 <div class="top">
4 <span v-if="!isFixed" class="iconfont iconarrowleft-fill icon-back" @click="goBack"></span>
5 <van-image width="100%" height="220" src="/src/assets/imgs/rachel.jpg" />
6 </div>
7
8 <!-- title start -->
9 <div id="title-fixed" v-if="isFixed" class="title-fixed">
10 <span v-if="isFixed" class="iconfont iconarrowleft-fill icon-back-fixed" :style="{'opacity': opacity}" @click="goBack"></span>
11 <span :style="{'opacity': opacity}">
12 Omnibus Law Introduces Special Tax Rules in Relation to the Sovereign Wealth Fund
13 </span>
14 </div>
15 <div id="title-org" class="title">
16 Omnibus Law Introduces Special Tax Rules in Relation to the Sovereign Wealth Fund
17 </div>
18 <!-- title end -->
19
20 <div class="cont">
21 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 .
22 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 .
23 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 .
24 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 .
25 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 .
26 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 .
27
28 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 .
29
30 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 .
31 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 .
32 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 .
33 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 .
34 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 .
35 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 .
36 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 .
37 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 .
38 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 .
39 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 .
40 end...end....end....end....
41 </div>
42 <div class="foot">
43 <div class="fav">
44 <span class="iconfont iconrating-outline icon-fav" @click="goBack"></span>
45 <span>Favourite</span>
46 </div>
47
48 <div class="share">
49 <span class="iconfont iconshare-outline icon-share" @click="goBack"></span>
50
51 <span>Share</span>
52
53 </div>
54 </div>
55 </div>
56 </template>
57
58 <script>
59 export default {
60 data() {
61 return {
62 isFixed: false, 64 opacity: 0,
65 };
66 },
67
68 components: {},
69
70 computed: {},
71
72 mounted() {
73
74 },
75
76 methods: {
77 handleScroll() {
78 let scrollTop = document.getElementById("main").scrollTop;
79
80 let title = document.getElementById("title-org");
81 //获取标题元素高度
82 let titleHeight = title.offsetHeight;
83 //获取标题距离页面偏移高度
84 let ofTop = title.offsetTop;
85 console.log("scrollTop:" + scrollTop, "ofTop: " + ofTop);
86 //去掉固定top 的高度，用于滚动实际计算
87 let calcH = ofTop - 54;
88 let opc = 0;
89 //滚动高度大于实际计算的偏移高度之后，需要开始显示固定bar
90 if (scrollTop >= calcH) {
91 //继续滚动的时候，计算超出实际计算的高度，并计算占有实际 title 高度的百分比
92 opc = ((scrollTop - calcH) * 1.0) / titleHeight;
93 console.log(opc, "%");
94 this.opacity = opc;
95 }
96 //百分比小于0之后，表明需要隐藏 固定bar
97 if (opc <= 0) {
98 this.isFixed = false;
99 } else {
100 //有透明度，表示需要显示 固定bar
101 this.isFixed = true;
102 }
103 },
104 goBack() {
105 this.$router.go(-1);
106 },
107 titleScroll(e) {
108 console.log(e);
109 },
110 },
111 };
112 </script>
113 <style lang='less' scoped>
114 .main {
115 overflow: auto;
116 height: calc(100% - 60px);
117 }
118 .icon-back {
119 display: inline-block;
120 // width: 20px;
121 // height: 20px;
122 position: absolute;
123 left: 20px;
124 top: 23px;
125 color: white;
126 z-index: 999;
127 font-size: 30px;
128 }
129 .icon-back-fixed {
130 display: inline-block;
131 // width: 20px;
132 // height: 20px;
133 position: absolute;
134 left: 14px;
135 top: 13px;
136 color: #101010;
137 z-index: 999;
138 font-size: 30px;
139 }
140 .title {
141 width: 330px;
142 margin: 15px auto;
143 font-size: 24px;
144 font-weight: 450;
145 color: #101010;
146 padding: 0px 20px;
147 }
148 .title-fixed {
149 position: absolute;
150 top: 0;
151 color: #7e7e7e;
152 background-color: white;
153 font-size: 14px;
154 margin: 0 auto;
155 width: calc(100% - 60px);
156 padding: 10px 10px 0px 50px;
157 height: 54px;
158 }
159 .cont {
160 padding: 0 18px;
161 font-size: 14px;
162 line-height: 22px;
163 word-break: break-word;
164 }
165 .foot {
166 position: absolute;
167 bottom: 0;
168 display: flex;
169 text-align: center;
170 width: 100%;
171 // line-height: 74px;
172 padding: 20px 0;
173 border-top: 1px solid #f2f2f2;
174 color: #7e7e7e;
175 background-color: white;
176 .fav {
177 flex: 1;
178 }
179 .share {
180 flex: 1;
181 border-left: 1px solid #dedede;
182 }
183 }
184 </style>
