Authored by xuqi

修正固定条fixed-top时出现的抖动

... ... @@ -61,30 +61,31 @@ exports.init = function() {
$(document).scroll(function() {
var sTop = $(this).scrollTop();
//Tip: removeClass只用移除相邻状态即可
if (sTop <= containerTop - wH + tContainerH) {
thumbContainer
.addClass('fixed-bottom')
.removeClass('static fixed-top absolute');
.removeClass('static');
} else if (sTop <= containerTop) {
thumbContainer
.addClass('static')
.removeClass('fixed-bottom fixed-top absolute');
.removeClass('fixed-bottom fixed-top');
} else if (sTop <= containerTop + containerH - tContainerH) {
thumbContainer
.addClass('fixed-top')
.removeClass('static absolute fixed-bottom')
.removeClass('static absolute')
.removeAttr('style');
} else if (sTop < containerTop + containerH) {
thumbContainer
.addClass('absolute')
.removeClass('static fixed-top fixed-bottom')
.removeClass('static fixed-top')
.css({
top: containerTop + containerH - tContainerH
});
} else if (sTop > containerTop + containerH) {
thumbContainer
.addClass('static')
.removeClass('absolute fixed-top fixed-bottom')
.removeClass('absolute')
.removeAttr('style');
}
});
... ...
... ... @@ -7,13 +7,13 @@ $pxConvertRem : 40;
/*container脱离文本流时占位用,指定高度为内部所有内容高度*/
.container-fixed-pos {
height: 186rem / $pxConvertRem;
height: 175rem / $pxConvertRem;
margin-left: -15rem / $pxConvertRem;
}
.thumb-container {
font-size: 0;
padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem;
padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
background: #fff;
z-index: 10;
border-bottom: 1px solid #b0b0b0;
... ... @@ -48,7 +48,7 @@ $pxConvertRem : 40;
display: inline-block;
position: relative;
margin-right: 22rem / $pxConvertRem;
padding-bottom: 20rem / $pxConvertRem;
padding-bottom: 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
&:last-child {
margin-right: 0;
... ... @@ -74,7 +74,7 @@ $pxConvertRem : 40;
}
.thumb-img {
height: 134rem / $pxConvertRem;
height: 134rem / $pxConvertRem; /*修改height时请修正.container-fixed-pos高度*/
width: 96rem / $pxConvertRem;
border: 1px solid transparent;
}
... ...