article-type-three.js
3.8 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
/**
* 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
* @author: xuqi(qi.xu@yoho.cn)
* @date；2015/3/30
*/
var $ = require('jquery');
require('lazyload');
/**
* 初始化$事件并默认选中列表第一项
*/
exports.init = function() {
$(function() {
var container = $('.article-type-three'),
thumbContainer = container.find('.thumb-container'),
prodList = container.find('.prod-list'),
wH = $(window).height(),
isInit = true,
tContainerH,
containerH,
containerTop;
//点击分类，显示分类下推荐商品列表
thumbContainer.delegate('.thumb', 'click', function() {
var curItem,
index;
curItem = $(this);
index = curItem.index();
thumbContainer.find('.thumb').removeClass('focus')
curItem.addClass('focus');
prodList.find('.prod')
.addClass('hide')
.eq(index)
.removeClass('hide');
//图片懒加载
$("img.lazy").lazyload({
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
});
//scroll to top
if (!isInit) {
$('body').animate({
scrollTop: container.offset().top
}, 400);
} else {
isInit = false;
}
});
//默认选中第一个
thumbContainer.find('.thumb:first-child').click();
tContainerH = thumbContainer.outerHeight(); //thumber-container高度
containerH = container.height(); //article-type-three高度
containerTop = container.offset().top; //article-type-three offset top
//scroll时控制列表的位置
$(document).scroll(function() {
var sTop = $(this).scrollTop();
//Tip: removeClass只用移除相邻状态即可
if (sTop <= containerTop - wH + tContainerH) {
thumbContainer
.addClass('fixed-bottom')
.removeClass('static');
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop) {
thumbContainer
.addClass('static')
.removeClass('fixed-bottom fixed-top')
.removeAttr('style');
prodList.removeAttr('style')
} else if (sTop <= containerTop + containerH - tContainerH) {
thumbContainer
.addClass('fixed-top')
.removeClass('static absolute')
.removeAttr('style');
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop + containerH) {
thumbContainer
.addClass('absolute')
.removeClass('static fixed-top')
.css({
top: containerTop + containerH - tContainerH
});
prodList.css({
'margin-top': tContainerH
});
} else if (sTop > containerTop + containerH) {
thumbContainer
.addClass('static')
.removeClass('absolute')
.removeAttr('style');
prodList.removeAttr('style');
}
});
//初始执行scroll从而初始化分类信息的位置（非0时默认会执行scroll）
if ($(document).scrollTop() === 0) {
$(document).scroll();
}
});
};