Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop
Showing
5 changed files
with
62 additions
and
49 deletions
framework @ 75bbc3b0
@@ -10,6 +10,7 @@ var $ = require('jquery'), | @@ -10,6 +10,7 @@ var $ = require('jquery'), | ||
10 | lazyLoad = require('yoho.lazyload'); | 10 | lazyLoad = require('yoho.lazyload'); |
11 | 11 | ||
12 | var swiper, | 12 | var swiper, |
13 | + $fixTitleBar, | ||
13 | $brandText, | 14 | $brandText, |
14 | $brandHref, | 15 | $brandHref, |
15 | $brandList = $('.brand-list'); | 16 | $brandList = $('.brand-list'); |
@@ -40,21 +41,30 @@ $('.yoho-header').css({ | @@ -40,21 +41,30 @@ $('.yoho-header').css({ | ||
40 | top: 0 | 41 | top: 0 |
41 | }); | 42 | }); |
42 | 43 | ||
44 | +$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>'); | ||
45 | +$fixTitleBar.hide(); | ||
46 | +$('.brand-list').last().append($fixTitleBar); | ||
47 | + | ||
43 | $(window).scroll(function() { | 48 | $(window).scroll(function() { |
44 | - var scrTop = $(window).scrollTop(); | 49 | + var scrTop = $(window).scrollTop(), |
50 | + minBrandListTop = brandSwipe + $('.hot-brand').outerHeight() + | ||
51 | + $('.banner-top').outerHeight(); | ||
52 | + | ||
53 | + if ($brandList.eq(0).offset().top < minBrandListTop) { | ||
54 | + $fixTitleBar.hide(); | ||
55 | + } | ||
45 | 56 | ||
46 | - $('.brand-list').each(function() { | 57 | + $brandList.each(function() { |
47 | var offTop = $(this).offset().top - brandSwipe; | 58 | var offTop = $(this).offset().top - brandSwipe; |
48 | 59 | ||
49 | if (scrTop >= offTop) { | 60 | if (scrTop >= offTop) { |
50 | - $brandList.find('.title-bar').css('position', 'static'); | ||
51 | - $(this).find('.title-bar').css({ | 61 | + $fixTitleBar.css({ |
62 | + display: 'block', | ||
52 | position: 'fixed', | 63 | position: 'fixed', |
53 | top: brandSwipe | 64 | top: brandSwipe |
54 | - }); | ||
55 | - } else { | ||
56 | - $(this).find('.title-bar').css('position', 'static'); | 65 | + }).find('h2').html($(this).find('.title-bar').text()); |
57 | } | 66 | } |
67 | + | ||
58 | }); | 68 | }); |
59 | }); | 69 | }); |
60 | 70 |
@@ -4,10 +4,13 @@ | @@ -4,10 +4,13 @@ | ||
4 | * @date: 2015/10/28 | 4 | * @date: 2015/10/28 |
5 | */ | 5 | */ |
6 | var $ = require('jquery'); | 6 | var $ = require('jquery'); |
7 | + | ||
7 | var $searchBox = $('.search-box'), | 8 | var $searchBox = $('.search-box'), |
8 | $indexSearch = $('.index-search'), | 9 | $indexSearch = $('.index-search'), |
9 | $indexLogo = $('.index-logo'); | 10 | $indexLogo = $('.index-logo'); |
10 | 11 | ||
12 | +require('../common'); | ||
13 | + | ||
11 | function showBigSearch() { | 14 | function showBigSearch() { |
12 | $indexLogo.css({ | 15 | $indexLogo.css({ |
13 | opacity: 0 | 16 | opacity: 0 |
@@ -50,4 +53,4 @@ $('.no-search').on('touchend', function() { | @@ -50,4 +53,4 @@ $('.no-search').on('touchend', function() { | ||
50 | hideBigSearch(); | 53 | hideBigSearch(); |
51 | }); | 54 | }); |
52 | 55 | ||
53 | -window.rePosFooter(); | 56 | +window.rePosFooter && window.rePosFooter(); |
@@ -185,51 +185,50 @@ | @@ -185,51 +185,50 @@ | ||
185 | .search-result { | 185 | .search-result { |
186 | padding-top: 176rem / $pxConvertRem; | 186 | padding-top: 176rem / $pxConvertRem; |
187 | } | 187 | } |
188 | -} | ||
189 | 188 | ||
190 | -.history{ | ||
191 | - width: 100%; | ||
192 | - height: auto; | ||
193 | - overflow: hidden; | ||
194 | - position: absolute; | ||
195 | - left: 0; | ||
196 | - top: 176rem / $pxConvertRem; | ||
197 | - > h6{ | ||
198 | - width: 100%; | ||
199 | - height: 88rem / $pxConvertRem; | ||
200 | - line-height: 88rem / $pxConvertRem; | ||
201 | - color: #999; | ||
202 | - text-indent: .6rem; | ||
203 | - font-size: 36em / $pxConvertRem; | ||
204 | - } | ||
205 | - .historyList{ | 189 | + .history{ |
206 | width: 100%; | 190 | width: 100%; |
207 | height: auto; | 191 | height: auto; |
208 | overflow: hidden; | 192 | overflow: hidden; |
209 | - display: block; | ||
210 | - > a{ | 193 | + position: absolute; |
194 | + left: 0; | ||
195 | + top: 176rem / $pxConvertRem; | ||
196 | + > h6{ | ||
197 | + width: 100%; | ||
198 | + height: 88rem / $pxConvertRem; | ||
199 | + line-height: 88rem / $pxConvertRem; | ||
200 | + color: #999; | ||
201 | + text-indent: .6rem; | ||
202 | + font-size: 36em / $pxConvertRem; | ||
203 | + } | ||
204 | + .historyList{ | ||
205 | + width: 100%; | ||
206 | + height: auto; | ||
207 | + overflow: hidden; | ||
208 | + display: block; | ||
209 | + > a{ | ||
210 | + width: auto; | ||
211 | + height: 58rem / $pxConvertRem; | ||
212 | + overflow: hidden; | ||
213 | + line-height: 58rem / $pxConvertRem; | ||
214 | + margin: 0 0 20rem / $pxConvertRem .6rem; | ||
215 | + padding: 0 20rem / $pxConvertRem; | ||
216 | + float: left; | ||
217 | + background-color:#f8f8f8; | ||
218 | + color: #444; | ||
219 | + } | ||
220 | + } | ||
221 | + > span{ | ||
211 | width: auto; | 222 | width: auto; |
212 | - height: 58rem / $pxConvertRem; | 223 | + height: 68rem / $pxConvertRem; |
213 | overflow: hidden; | 224 | overflow: hidden; |
214 | - line-height: 58rem / $pxConvertRem; | ||
215 | - margin: 0 0 20rem / $pxConvertRem .6rem; | ||
216 | - padding: 0 20rem / $pxConvertRem; | ||
217 | - float: left; | ||
218 | - background-color:#f8f8f8; | ||
219 | - color: #444; | 225 | + display: inline-block; |
226 | + line-height: 68rem / $pxConvertRem; | ||
227 | + border:1px solid #e6e6e6; | ||
228 | + padding: 0 28rem / $pxConvertRem; | ||
229 | + font-size: 48em / $pxConvertRem; | ||
230 | + margin-left: .6rem; | ||
231 | + color: #000; | ||
220 | } | 232 | } |
221 | } | 233 | } |
222 | - > span{ | ||
223 | - width: auto; | ||
224 | - height: 68rem / $pxConvertRem; | ||
225 | - overflow: hidden; | ||
226 | - display: inline-block; | ||
227 | - line-height: 68rem / $pxConvertRem; | ||
228 | - border:1px solid #e6e6e6; | ||
229 | - padding: 0 28rem / $pxConvertRem; | ||
230 | - font-size: 48em / $pxConvertRem; | ||
231 | - margin-left: .6rem; | ||
232 | - color: #000; | ||
233 | - } | ||
234 | } | 234 | } |
235 | - |
@@ -17,14 +17,15 @@ | @@ -17,14 +17,15 @@ | ||
17 | overflow: hidden; | 17 | overflow: hidden; |
18 | 18 | ||
19 | .brand-logo { | 19 | .brand-logo { |
20 | + display: table-cell; | ||
20 | width: 100%; | 21 | width: 100%; |
21 | height: 128rem / $pxConvertRem; | 22 | height: 128rem / $pxConvertRem; |
22 | line-height: 128rem / $pxConvertRem; | 23 | line-height: 128rem / $pxConvertRem; |
23 | text-align: center; | 24 | text-align: center; |
24 | font-size: 0; | 25 | font-size: 0; |
26 | + vertical-align: middle; | ||
25 | 27 | ||
26 | img { | 28 | img { |
27 | - vertical-align: middle; | ||
28 | max-width: 100%; | 29 | max-width: 100%; |
29 | max-height: 100%; | 30 | max-height: 100%; |
30 | } | 31 | } |
-
Please register or login to post a comment