shop.js
3.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/**
* 品牌店铺首页
*/
var $ = require('jquery'),
IScroll = require('iscroll/iscroll-probe'),
activeTab,
myScroll,
imgH,
nav1H,
main1H,
main1oH,
nav2H,
main2oH,
scH,
$nav1 = $('#pos-nav'),
$nav2 = $('#pos-list'),
isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;//判断浏览器类型
$.jqtab = function(nav, main) {
$(nav + ' li').click(function() {
$(nav + ' li').removeClass('active');
$(nav + ' li').find('a').removeClass('color');
$(this).find('a').addClass('color');
activeTab = $(this).find('a').attr('tab');
$(main).hide();
$(this).addClass('active');
$('#' + activeTab).fadeIn();
return false;
});
};
$.jqtab('#nav', '.main');
$(function(){
// if (!isIphone) {
// return;
// }
$('#wrapper').addClass('scroll-wrapper');
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
if (!isIphone) {
return;
}
myScroll.on('scroll', function() {
var sTop = -this.y;
console.log(sTop)
if (sTop < imgH) {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
} //滑动距离不到导航1
} else if (sTop < imgH + nav1H + main1oH) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
}//滑动距离不到导航2
if (sTop < imgH + main1H) {
if (!$nav1.hasClass('fixed-top')) {
$nav1.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (- scH) +
'px)'
});
}
} else if (sTop < imgH + nav1H + main1H) {
if (!$nav1.hasClass('absolute')) {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
$nav1.css({
transform: 'translate(0, ' + (imgH + main1H -
sTop - scH) + 'px)'
});
}
} else {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
if ($nav2.hasClass('hide')) {
$nav2.removeClass('hide');
}
if (sTop < imgH + nav1H + main1oH + nav2H + main2oH) {
if (!$nav2.hasClass('fixed-top')) {
$nav2.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (- scH) +
'px)'
});
}
} else {
if (!$nav2.hasClass('absolute')) {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
$nav2.css({
transform: 'translate(0, ' + (imgH + nav1H +
main1oH + main2oH -sTop - scH) + 'px)'
});
}
}
});
})
//window onload 后重新refresh iscroll
window.onload = function() {
myScroll && myScroll.refresh();
imgH = $('#nav-top').outerHeight();
nav1H = $('#nav').outerHeight();
main1H = $('#nav-main').height();
main1oH = $('#nav-main').outerHeight();
nav2H = $('#list-nav').outerHeight();
main2oH = $('#goods-container').outerHeight();
scH = $('#scroller').outerHeight();
console.log(imgH + main1H)
console.log(imgH + nav1H + main1H)
};