Showing
2 changed files
with
10 additions
and
9 deletions
@@ -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 | } |
-
Please register or login to post a comment