index.page.js 1.14 KB
/**
 * 品牌页
 * @author: zxr<xiaoru.zhang@yoho.cn>
 * @date: 2016/07/09
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload');

var $list = $('.brands-list'),
    $gory = $('.brands-category'),
    $category = $gory.find('a'),
    categoryHeight = $category.height(),
    categoryTop = $category.offset() ? $category.offset().top : 0;

require('../common/header');
require('../common/return-top');

lazyLoad($('.brands-list img.lazy'));

// 品牌类别滚动事件
$(window).scroll(function() {
    if ($(this).scrollTop() >= categoryTop) {
        $gory.addClass('category-fix');
    } else {
        $gory.removeClass('category-fix');
    }
});


// 点击字母,页面滚动到相关区域
$category.click(function() {
    var name = $(this).attr('href').split('#')[1],
        targetTop = $list.find('[name=' + name + ']').offset().top - categoryHeight;
 
    $('.category-nav').find('a').css('color', '#222');
    $(this).css('color', '#379ed6');

    if (!$gory.hasClass('category-fix')) {
        targetTop -= categoryHeight;
    }

    $('html,body').animate({
        scrollTop: targetTop
    }, 200);
    return false;
});