Showing
5 changed files
with
22 additions
and
15 deletions
@@ -11,6 +11,10 @@ var $ = require('yoho.zepto'), | @@ -11,6 +11,10 @@ var $ = require('yoho.zepto'), | ||
11 | var swiper, | 11 | var swiper, |
12 | $brandList = $('.brand-list'); | 12 | $brandList = $('.brand-list'); |
13 | 13 | ||
14 | +var searchH = $('.newbrand-search').height(), | ||
15 | + headerH = $('.yoho-header').height(), | ||
16 | + brandSwipe = parseInt(searchH) + parseInt(headerH); | ||
17 | + | ||
14 | swiper = new Swiper('.swiper-container', { | 18 | swiper = new Swiper('.swiper-container', { |
15 | lazyLoading: true, | 19 | lazyLoading: true, |
16 | loop: true, | 20 | loop: true, |
@@ -27,14 +31,9 @@ $('.banner-top').css('padding-top', '90px'); | @@ -27,14 +31,9 @@ $('.banner-top').css('padding-top', '90px'); | ||
27 | 31 | ||
28 | if ($brandList.length > 0) { | 32 | if ($brandList.length > 0) { |
29 | $(window).scroll(function() { | 33 | $(window).scroll(function() { |
30 | - var scrTop = $(window).scrollTop(), | ||
31 | - searchH = $('.newbrand-search').height(), | ||
32 | - headerH = $('.yoho-header').height(), | ||
33 | - brandSwipe = parseInt(searchH) + parseInt(headerH); | ||
34 | - | 34 | + var scrTop = $(window).scrollTop(); |
35 | $('.brand-list').each(function() { | 35 | $('.brand-list').each(function() { |
36 | var offTop = $(this).offset().top - brandSwipe; | 36 | var offTop = $(this).offset().top - brandSwipe; |
37 | - | ||
38 | if (scrTop >= offTop) { | 37 | if (scrTop >= offTop) { |
39 | $brandList.find('.title-bar').css('position', 'static'); | 38 | $brandList.find('.title-bar').css('position', 'static'); |
40 | $(this).find('.title-bar').css({ | 39 | $(this).find('.title-bar').css({ |
@@ -47,3 +46,11 @@ if ($brandList.length > 0) { | @@ -47,3 +46,11 @@ if ($brandList.length > 0) { | ||
47 | }); | 46 | }); |
48 | }); | 47 | }); |
49 | } | 48 | } |
49 | + | ||
50 | +$('#right-bar .con').find('b').unbind().on('tap',function(){ | ||
51 | + var index=$(this).index(); | ||
52 | + if($('.bar-'+index).size()>0){ | ||
53 | + document.body.scrollTop = parseInt($('.bar-'+index)[0].offsetTop) - parseInt(brandSwipe-1); | ||
54 | + } | ||
55 | +}); | ||
56 | + |
1 | .good-info { | 1 | .good-info { |
2 | - display: inline-block; | ||
3 | - width: 276rem / $pxConvertRem; | 2 | + float: left; |
3 | + width: 44%; | ||
4 | height: 486rem / $pxConvertRem; | 4 | height: 486rem / $pxConvertRem; |
5 | - margin: 28rem / $pxConvertRem (15rem / $pxConvertRem) 0; | 5 | + margin: 28rem / $pxConvertRem 3% 0; |
6 | 6 | ||
7 | 7 | ||
8 | .tag-container { | 8 | .tag-container { |
@@ -111,17 +111,18 @@ | @@ -111,17 +111,18 @@ | ||
111 | .right-bar { | 111 | .right-bar { |
112 | 112 | ||
113 | width: 60rem / $pxConvertRem; | 113 | width: 60rem / $pxConvertRem; |
114 | - top: 240rem / $pxConvertRem !important; | ||
115 | - overflow: hidden; | 114 | + height: 75%; |
115 | + top: 20%; | ||
116 | + overflow: auto; | ||
116 | position: fixed; | 117 | position: fixed; |
117 | right: 2rem / $pxConvertRem; | 118 | right: 2rem / $pxConvertRem; |
118 | border-radius: 12rem / $pxConvertRem; | 119 | border-radius: 12rem / $pxConvertRem; |
119 | background: rgba(0,0,0,.8); | 120 | background: rgba(0,0,0,.8); |
120 | z-index: 2; | 121 | z-index: 2; |
121 | b { | 122 | b { |
122 | - height: 32rem / $pxConvertRem; | 123 | + height: 36rem / $pxConvertRem; |
123 | 124 | ||
124 | - line-height: 28rem / $pxConvertRem; | 125 | + line-height: 36rem / $pxConvertRem; |
125 | text-align: center; | 126 | text-align: center; |
126 | display: block; | 127 | display: block; |
127 | color: #999999; | 128 | color: #999999; |
@@ -32,7 +32,7 @@ | @@ -32,7 +32,7 @@ | ||
32 | {{/ hotBrand}} | 32 | {{/ hotBrand}} |
33 | 33 | ||
34 | {{# brandList}} | 34 | {{# brandList}} |
35 | - <div class="brand-list"> | 35 | + <div class="brand-list bar-{{@index}}"> |
36 | <div class="title-bar"> | 36 | <div class="title-bar"> |
37 | <h2 style="position: static;">{{title}}</h2> | 37 | <h2 style="position: static;">{{title}}</h2> |
38 | </div> | 38 | </div> |
-
Please register or login to post a comment