fe / yohobuy-frontend · Commits

Go to a project

Authored by xuqi
Commit ec5856dd606b7e163b3b227cd98363d913ffde81 1 parent 114d1558

改用margin-top控制fixed后脱离文本流的问题

Inline Side-by-side
Showing 3 changed files with 26 additions and 22 deletions
... ... @@ -66,15 +66,23 @@ exports.init = function() {
thumbContainer
.addClass('fixed-bottom')
.removeClass('static');
} else if (sTop <= containerTop - wH + tContainerH) {
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop) {
thumbContainer
.addClass('static')
.removeClass('fixed-bottom fixed-top');
.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')
... ... @@ -82,11 +90,15 @@ exports.init = function() {
.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');
}
});
... ...
... ... @@ -5,15 +5,9 @@ $pxConvertRem : 40;
padding:0 0 0 15rem / $pxConvertRem;
background: #fff;
/*container脱离文本流时占位用，指定高度为内部所有内容高度*/
.container-fixed-pos {
height: 175rem / $pxConvertRem;
margin-left: -15rem / $pxConvertRem;
}
.thumb-container {
font-size: 0;
padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem;
background: #fff;
z-index: 10;
border-bottom: 1px solid #b0b0b0;
... ... @@ -48,7 +42,7 @@ $pxConvertRem : 40;
display: inline-block;
position: relative;
margin-right: 22rem / $pxConvertRem;
padding-bottom: 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
padding-bottom: 20rem / $pxConvertRem;
&:last-child {
margin-right: 0;
... ... @@ -74,7 +68,7 @@ $pxConvertRem : 40;
}
.thumb-img {
height: 134rem / $pxConvertRem; /*修改height时请修正.container-fixed-pos高度*/
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
border: 1px solid transparent;
}
... ...
{{# collocation}}
<div class="article-type-three">
<div class="container-fixed-pos">
<ul class="thumb-container clearfix">
{{# list}}
<li class="thumb">
<img class="thumb-img lazy" data-original="{{thumb}}">
<span class="clothe-type {{type}}"></span>
<em class="arrow"></em>
</li>
{{/ list}}
</ul>
</div>
<ul class="thumb-container clearfix">
{{# list}}
<li class="thumb">
<img class="thumb-img lazy" data-original="{{thumb}}">
<span class="clothe-type {{type}}"></span>
<em class="arrow"></em>
</li>
{{/ list}}
</ul>
<div class="prod-list clearfix">
{{# list}}
<div class="prod hide">
... ...