/** * 搭配区块 * * @constructor */ function CollocationBlock() { this.elem = $('.collocation-block'); this.container = this.elem.children('.thumb-container'); this.elem.find('.prod'); this.prods = this.elem.find('.prod'); // this.fixedContainer = $('#wrapper') // .after(this.container.clone().addClass('fixed-thumb-container fixed-bottom')) // .next('.thumb-container'); // lazyLoad(this.fixedContainer.find('.lazy')); this.container.delegate('.thumb', 'touchend', this._touchHandler.bind(this)); // this.fixedContainer.delegate('.thumb', 'touchend', this._touchHandler.bind(this)); this.thumbs = this.container.find('li'); // this.fixedThumbs = this.fixedContainer.find('li'); // 初始化箭头位置 this._updateCollocationArrowPos(this.thumbs.filter('.focus')); // let scrollFn = () => { // let pos = this.container.offset(), // posFixed = this.fixedContainer.offset(); // let visible = false; // if (posFixed.top >= pos.top) { // visible = false; // } else { // visible = true; // } // if (posFixed.top + this.fixedContainer.height() > $('ul.brand-list').offset().top) { // visible = false; // } else if (pos.top < $(window).scrollTop()) { // visible = true; // this.fixedContainer.removeClass('fixed-bottom').addClass('fixed-top'); // } else { // this.fixedContainer.removeClass('fixed-top').addClass('fixed-bottom'); // } // this.fixedContainer.css({ // visibility: visible ? 'visible' : 'hidden' // }); // }; // $(document).on('scroll', scrollFn); // $(document).on('touchmove', scrollFn); } CollocationBlock.exists = function() { return $('.collocation-block').size() > 0; }; $.extend(CollocationBlock.prototype, { /** * 计算搭配的箭头的位置 * @param current 当前focus的搭配项 */ _updateCollocationArrowPos: function(current) { let left = current.offset().left, bgPos = -$(window).width() + left + (this.thumbs.width() / 2) + 'px'; this.container.css({ backgroundPosition: bgPos + ' bottom' }); /* this.fixedContainer.css({ backgroundPosition: bgPos + ' bottom' }); */ }, /** * 搭配thumb的touch事件句柄 * * @param e * @private */ _touchHandler: function(e) { let current = $(e.currentTarget), index = current.index(); if (current.hasClass('focus')) { return; } this.thumbs.removeClass('focus'); // this.fixedThumbs.removeClass('focus'); current.addClass('focus'); // 更新箭头位置 this._updateCollocationArrowPos(current); this.prods.not('.hide').addClass('hide'); this.curProds = this.prods.eq(index); this.curProds.removeClass('hide'); $('body').animate({ scrollTop: this.elem.offset().top }, 400); } }); module.exports = CollocationBlock;