1
2
3
4
5
6
7
8
Document9
10
11
12
13
14
28
29
30
31
32
33
34
35
36
37
44
45
46
47
48
49
50
51
52
53
54
56
57
58
59
68
69
70
71 var vm = newVue({72 el: '#app',73 data: {74 scrollTop: 0,75 opacity: 0,76 active: 'goods',77
78 },79 //绑定滚动事件
80 mounted() {81 window.addEventListener('scroll', this.handleScroll);82 },83 methods: {84 //监听页面滚动
85 handleScroll() {86 //获取当前的滚动距离
87 var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop88 //console.log(scrollTop)
89
90 if (scrollTop < 200) {91 //当滚动距离小于200时,计算导航透明度,可以考虑修改为每20增加0.1
92 //this.opacity = (scrollTop / 200).toFixed(1);
93 this.opacity = scrollTop / 200;94 this.active = 'goods';95 return
96 } else{97 this.opacity = 1
98 }99 //当滚动距离不小于200时,获取三个部分的顶部位置-45。
100 let commentTop = this.$refs.comment.offsetTop - 45;101 let recommendTop = this.$refs.recommend.offsetTop - 45;102 let detailTop = this.$refs.detail.offsetTop - 45;103 //计算滚动距离在哪个区间,修改this.active对应的样式名
104 if (scrollTop < commentTop) { if (this.active != 'goods') this.active = 'goods'; }105 else if (scrollTop >= commentTop && scrollTop < recommendTop) { if (this.active != 'comment') this.active = 'comment'; }106 else if (scrollTop >= recommendTop && scrollTop < detailTop) { if (this.active != 'recommend') this.active = 'recommend'; }107 else if (scrollTop >= detailTop) { if (this.active != 'detail') this.active = 'detail'; }108 },109
110 //点击导航栏第一个商品选项卡时,直接滚动到0
111 onScrollGoods() {112 //document.documentElement.scrollTop = 0;
113 window.scrollTo({top: 0, behavior: "smooth"});114 },115 //点击导航栏其他选项卡时,直接滚动到对应ref的offsetTop-45(导航栏高度)
116 onScrollComment() {117 if (!this.opacity) return;118 window.scrollTo({top: this.$refs.comment.offsetTop - 45, behavior: "smooth"});119 },120 onScrollRecommend() {121 if (!this.opacity) return;122 window.scrollTo({top: this.$refs.recommend.offsetTop - 45, behavior: "smooth"});123 },124 onScrollDetail() {125 if (!this.opacity) return;126 //document.documentElement.scrollTop = this.$refs.detail.offsetTop - 45;
127 //behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
128 window.scrollTo({top: this.$refs.detail.offsetTop - 45, behavior: "smooth"});129
130 },131 },132 })133
134
135 body {136 margin: 0;137 }138 a {139 text-decoration: none;140 color: #252525;141 -webkit-tap-highlight-color:transparent;142 }143
144 #app{145 margin: 05px;146 }147 .nav {148 height: 45px;149 width: 100%;150 background-color: #fff;151 position: fixed;152 z-index: 99;153 opacity: 999;154 }155
156 .detail_anchor {157 display: -webkit-box;158 display: -webkit-flex;159 display: flex;160 height: 44px;161 line-height: 44px;162 font-size: 14px;163 color: #666;164 box-shadow: 0 1px 6px rgba(0, 0, 0, .1);165 justify-content: space-evenly;166 }167
168 .header-new-title {169 margin: 070px;170 height: 44px;171 font-size: 16px;172 line-height: 44px;173 text-align: center;174 color: #333;175 overflow: hidden;176 text-overflow: ellipsis;177 white-space: nowrap;178 }179
180 .active {181 color: #e4393c;182 }183
184 .de_btn_bar{185 height: 50px;186 width: 100%;187 background-color: #fff;188 position: fixed;189 z-index: 99;190 bottom: 0;191 }192 .btn_group{193 /*display: flex;194 justify-content: space-evenly;*/
195 height: 100%;196 }197 .btn_group_item{198 display: inline-block;199 height: 100%;200 width: 25%;201 margin-right: -5px;202 padding: 0;203 text-align: center;204 line-height: 50px;205 }206 .add_cart{207 color: #fff;208 background: linear-gradient(138deg,#ffa600,#ffb000 77%,#ffbc00);209 }210 .now_buy{211 color: #fff;212 background: linear-gradient(-41deg,#ff4f18,#ff2000 24%,#f10000);213 }214
215
216
217
218
38
39
40
41
42
43