改用margin-top控制fixed后脱离文本流的问题
Showing
3 changed files
with
26 additions
and
22 deletions
| @@ -66,15 +66,23 @@ exports.init = function() { | @@ -66,15 +66,23 @@ exports.init = function() { | ||
| 66 | thumbContainer | 66 | thumbContainer |
| 67 | .addClass('fixed-bottom') | 67 | .addClass('fixed-bottom') |
| 68 | .removeClass('static'); | 68 | .removeClass('static'); |
| 69 | - } else if (sTop <= containerTop - wH + tContainerH) { | 69 | + prodList.css({ |
| 70 | + 'margin-top': tContainerH | ||
| 71 | + }); | ||
| 72 | + } else if (sTop <= containerTop) { | ||
| 70 | thumbContainer | 73 | thumbContainer |
| 71 | .addClass('static') | 74 | .addClass('static') |
| 72 | - .removeClass('fixed-bottom fixed-top'); | 75 | + .removeClass('fixed-bottom fixed-top') |
| 76 | + .removeAttr('style'); | ||
| 77 | + prodList.removeAttr('style') | ||
| 73 | } else if (sTop <= containerTop + containerH - tContainerH) { | 78 | } else if (sTop <= containerTop + containerH - tContainerH) { |
| 74 | thumbContainer | 79 | thumbContainer |
| 75 | .addClass('fixed-top') | 80 | .addClass('fixed-top') |
| 76 | .removeClass('static absolute') | 81 | .removeClass('static absolute') |
| 77 | .removeAttr('style'); | 82 | .removeAttr('style'); |
| 83 | + prodList.css({ | ||
| 84 | + 'margin-top': tContainerH | ||
| 85 | + }); | ||
| 78 | } else if (sTop <= containerTop + containerH) { | 86 | } else if (sTop <= containerTop + containerH) { |
| 79 | thumbContainer | 87 | thumbContainer |
| 80 | .addClass('absolute') | 88 | .addClass('absolute') |
| @@ -82,11 +90,15 @@ exports.init = function() { | @@ -82,11 +90,15 @@ exports.init = function() { | ||
| 82 | .css({ | 90 | .css({ |
| 83 | top: containerTop + containerH - tContainerH | 91 | top: containerTop + containerH - tContainerH |
| 84 | }); | 92 | }); |
| 93 | + prodList.css({ | ||
| 94 | + 'margin-top': tContainerH | ||
| 95 | + }); | ||
| 85 | } else if (sTop > containerTop + containerH) { | 96 | } else if (sTop > containerTop + containerH) { |
| 86 | thumbContainer | 97 | thumbContainer |
| 87 | .addClass('static') | 98 | .addClass('static') |
| 88 | .removeClass('absolute') | 99 | .removeClass('absolute') |
| 89 | .removeAttr('style'); | 100 | .removeAttr('style'); |
| 101 | + prodList.removeAttr('style'); | ||
| 90 | } | 102 | } |
| 91 | }); | 103 | }); |
| 92 | 104 |
| @@ -5,15 +5,9 @@ $pxConvertRem : 40; | @@ -5,15 +5,9 @@ $pxConvertRem : 40; | ||
| 5 | padding:0 0 0 15rem / $pxConvertRem; | 5 | padding:0 0 0 15rem / $pxConvertRem; |
| 6 | background: #fff; | 6 | background: #fff; |
| 7 | 7 | ||
| 8 | - /*container脱离文本流时占位用，指定高度为内部所有内容高度*/ | ||
| 9 | - .container-fixed-pos { | ||
| 10 | - height: 175rem / $pxConvertRem; | ||
| 11 | - margin-left: -15rem / $pxConvertRem; | ||
| 12 | - } | ||
| 13 | - | ||
| 14 | .thumb-container { | 8 | .thumb-container { |
| 15 | font-size: 0; | 9 | font-size: 0; |
| 16 | - padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/ | 10 | + padding: 20rem / $pxConvertRem 0 0 20rem / $pxConvertRem; |
| 17 | background: #fff; | 11 | background: #fff; |
| 18 | z-index: 10; | 12 | z-index: 10; |
| 19 | border-bottom: 1px solid #b0b0b0; | 13 | border-bottom: 1px solid #b0b0b0; |
| @@ -48,7 +42,7 @@ $pxConvertRem : 40; | @@ -48,7 +42,7 @@ $pxConvertRem : 40; | ||
| 48 | display: inline-block; | 42 | display: inline-block; |
| 49 | position: relative; | 43 | position: relative; |
| 50 | margin-right: 22rem / $pxConvertRem; | 44 | margin-right: 22rem / $pxConvertRem; |
| 51 | - padding-bottom: 20rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/ | 45 | + padding-bottom: 20rem / $pxConvertRem; |
| 52 | 46 | ||
| 53 | &:last-child { | 47 | &:last-child { |
| 54 | margin-right: 0; | 48 | margin-right: 0; |
| @@ -74,7 +68,7 @@ $pxConvertRem : 40; | @@ -74,7 +68,7 @@ $pxConvertRem : 40; | ||
| 74 | } | 68 | } |
| 75 | 69 | ||
| 76 | .thumb-img { | 70 | .thumb-img { |
| 77 | - height: 134rem / $pxConvertRem; /*修改height时请修正.container-fixed-pos高度*/ | 71 | + height: 134rem / $pxConvertRem; |
| 78 | width: 96rem / $pxConvertRem; | 72 | width: 96rem / $pxConvertRem; |
| 79 | border: 1px solid transparent; | 73 | border: 1px solid transparent; |
| 80 | } | 74 | } |
| 1 | {{# collocation}} | 1 | {{# collocation}} |
| 2 | <div class="article-type-three"> | 2 | <div class="article-type-three"> |
| 3 | - <div class="container-fixed-pos"> | ||
| 4 | - <ul class="thumb-container clearfix"> | ||
| 5 | - {{# list}} | ||
| 6 | - <li class="thumb"> | ||
| 7 | - <img class="thumb-img lazy" data-original="{{thumb}}"> | ||
| 8 | - <span class="clothe-type {{type}}"></span> | ||
| 9 | - <em class="arrow"></em> | ||
| 10 | - </li> | ||
| 11 | - {{/ list}} | ||
| 12 | - </ul> | ||
| 13 | - </div> | 3 | + <ul class="thumb-container clearfix"> |
| 4 | + {{# list}} | ||
| 5 | + <li class="thumb"> | ||
| 6 | + <img class="thumb-img lazy" data-original="{{thumb}}"> | ||
| 7 | + <span class="clothe-type {{type}}"></span> | ||
| 8 | + <em class="arrow"></em> | ||
| 9 | + </li> | ||
| 10 | + {{/ list}} | ||
| 11 | + </ul> | ||
| 14 | <div class="prod-list clearfix"> | 12 | <div class="prod-list clearfix"> |
| 15 | {{# list}} | 13 | {{# list}} |
| 16 | <div class="prod hide"> | 14 | <div class="prod hide"> |
-
Please register or login to post a comment