Authored by xuqi

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

@@ -61,30 +61,31 @@ exports.init = function() { @@ -61,30 +61,31 @@ exports.init = function() {
61 $(document).scroll(function() { 61 $(document).scroll(function() {
62 var sTop = $(this).scrollTop(); 62 var sTop = $(this).scrollTop();
63 63
  64 + //Tip: removeClass只用移除相邻状态即可
64 if (sTop <= containerTop - wH + tContainerH) { 65 if (sTop <= containerTop - wH + tContainerH) {
65 thumbContainer 66 thumbContainer
66 .addClass('fixed-bottom') 67 .addClass('fixed-bottom')
67 - .removeClass('static fixed-top absolute'); 68 + .removeClass('static');
68 } else if (sTop <= containerTop) { 69 } else if (sTop <= containerTop) {
69 thumbContainer 70 thumbContainer
70 .addClass('static') 71 .addClass('static')
71 - .removeClass('fixed-bottom fixed-top absolute'); 72 + .removeClass('fixed-bottom fixed-top');
72 } else if (sTop <= containerTop + containerH - tContainerH) { 73 } else if (sTop <= containerTop + containerH - tContainerH) {
73 thumbContainer 74 thumbContainer
74 .addClass('fixed-top') 75 .addClass('fixed-top')
75 - .removeClass('static absolute fixed-bottom') 76 + .removeClass('static absolute')
76 .removeAttr('style'); 77 .removeAttr('style');
77 } else if (sTop < containerTop + containerH) { 78 } else if (sTop < containerTop + containerH) {
78 thumbContainer 79 thumbContainer
79 .addClass('absolute') 80 .addClass('absolute')
80 - .removeClass('static fixed-top fixed-bottom') 81 + .removeClass('static fixed-top')
81 .css({ 82 .css({
82 top: containerTop + containerH - tContainerH 83 top: containerTop + containerH - tContainerH
83 }); 84 });
84 } else if (sTop > containerTop + containerH) { 85 } else if (sTop > containerTop + containerH) {
85 thumbContainer 86 thumbContainer
86 .addClass('static') 87 .addClass('static')
87 - .removeClass('absolute fixed-top fixed-bottom') 88 + .removeClass('absolute')
88 .removeAttr('style'); 89 .removeAttr('style');
89 } 90 }
90 }); 91 });
@@ -7,13 +7,13 @@ $pxConvertRem : 40; @@ -7,13 +7,13 @@ $pxConvertRem : 40;
7 7
8 /*container脱离文本流时占位用,指定高度为内部所有内容高度*/ 8 /*container脱离文本流时占位用,指定高度为内部所有内容高度*/
9 .container-fixed-pos { 9 .container-fixed-pos {
10 - height: 186rem / $pxConvertRem; 10 + height: 175rem / $pxConvertRem;
11 margin-left: -15rem / $pxConvertRem; 11 margin-left: -15rem / $pxConvertRem;
12 } 12 }
13 13
14 .thumb-container { 14 .thumb-container {
15 font-size: 0; 15 font-size: 0;
16 - padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; 16 + padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
17 background: #fff; 17 background: #fff;
18 z-index: 10; 18 z-index: 10;
19 border-bottom: 1px solid #b0b0b0; 19 border-bottom: 1px solid #b0b0b0;
@@ -48,7 +48,7 @@ $pxConvertRem : 40; @@ -48,7 +48,7 @@ $pxConvertRem : 40;
48 display: inline-block; 48 display: inline-block;
49 position: relative; 49 position: relative;
50 margin-right: 22rem / $pxConvertRem; 50 margin-right: 22rem / $pxConvertRem;
51 - padding-bottom: 20rem / $pxConvertRem; 51 + padding-bottom: 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
52 52
53 &:last-child { 53 &:last-child {
54 margin-right: 0; 54 margin-right: 0;
@@ -74,7 +74,7 @@ $pxConvertRem : 40; @@ -74,7 +74,7 @@ $pxConvertRem : 40;
74 } 74 }
75 75
76 .thumb-img { 76 .thumb-img {
77 - height: 134rem / $pxConvertRem; 77 + height: 134rem / $pxConvertRem; /*修改height时请修正.container-fixed-pos高度*/
78 width: 96rem / $pxConvertRem; 78 width: 96rem / $pxConvertRem;
79 border: 1px solid transparent; 79 border: 1px solid transparent;
80 } 80 }