Authored by 2586703@qq.com

小箭头 js

... ... @@ -66,7 +66,7 @@ exports.init = function() {
thumbContainer
.addClass('fixed-bottom')
.removeClass('static');
} else if (sTop <= containerTop - wH + tContainerH) {
} else if (sTop <= containerTop) {
thumbContainer
.addClass('static')
.removeClass('fixed-bottom fixed-top');
... ... @@ -94,5 +94,24 @@ exports.init = function() {
if ($(document).scrollTop() === 0) {
$(document).scroll();
}
//计算小箭头位置
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
arrowPosition = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, arrowPosition, false);
doc.addEventListener('DOMContentLoaded', arrowPosition, false);
})(document, window);
});
};
\ No newline at end of file
... ...
... ... @@ -7,16 +7,17 @@ $pxConvertRem : 40;
/*container脱离文本流时占位用,指定高度为内部所有内容高度*/
.container-fixed-pos {
height: 175rem / $pxConvertRem;
height: 195rem / $pxConvertRem;
margin-left: -15rem / $pxConvertRem;
}
.thumb-container {
font-size: 0;
padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
background: #fff;
padding: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
z-index: 10;
border-bottom: 1px solid #b0b0b0;
background: url('../img/thumb-container-bg.png') no-repeat -72rem / $pxConvertRem bottom;
background-size: 200% 100%;
&.fixed-top {
position: fixed;
... ... @@ -48,7 +49,7 @@ $pxConvertRem : 40;
display: inline-block;
position: relative;
margin-right: 22rem / $pxConvertRem;
padding-bottom: 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
padding-bottom: 30rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
&:last-child {
margin-right: 0;
... ...
... ... @@ -6,7 +6,6 @@
<li class="thumb">
<img class="thumb-img lazy" data-original="{{thumb}}">
<span class="clothe-type {{type}}"></span>
<em class="arrow"></em>
</li>
{{/ list}}
</ul>
... ...