Authored by xuqi

优化

... ... @@ -14,7 +14,11 @@ exports.init = function() {
var container = $('.article-type-three'),
thumbContainer = container.find('.thumb-container'),
prodList = container.find('.prod-list'),
wH = $(window).height();
wH = $(window).height(),
isInit = true,
tContainerH,
containerH,
containerTop;
//点击分类,显示分类下推荐商品列表
thumbContainer.delegate('.thumb', 'click', function() {
... ... @@ -36,23 +40,26 @@ exports.init = function() {
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
});
//scroll to top when container is fixed
if (thumbContainer.hasClass('fixed-top') || thumbContainer.hasClass('fixed-bottom')) {
//scroll to top
if (!isInit) {
$('body').animate({
scrollTop: container.offset().top
}, 800);
} 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(),
tContainerH = thumbContainer.outerHeight(), //thumber-container高度
containerH = container.height(), //article-type-three高度
containerTop = container.offset().top; //article-type-three offset top
var sTop = $(this).scrollTop();
//Tip: removeClass只用移除相邻状态即可
if (sTop <= containerTop - wH + tContainerH) {
... ...
... ... @@ -30,6 +30,10 @@ $pxConvertRem : 40;
left: 0;
right: 0;
bottom: 0;
.thumb.focus .arrow {
display: none;
}
}
&.absolute {
... ... @@ -38,10 +42,6 @@ $pxConvertRem : 40;
&.static {
position: static;
.thumb.focus .arrow {
display: block;
}
}
.thumb {
... ... @@ -60,7 +60,7 @@ $pxConvertRem : 40;
}
.arrow {
display: none;
display: block;
position: absolute;
width: 32rem / $pxConvertRem;
height: 19rem / $pxConvertRem;
... ...