shop.js 3.96 KB
/**
 * 品牌店铺首页
 */

var $ = require('jquery'),
    IScroll = require('iscroll/iscroll-probe'),
    activeTab,
    myScroll,
    imgH,
    nav1H,
    main1H,
    main1oH,
    nav2H,
    main2oH,
    scH,
    $nav1 = $('#pos-nav'),
    $nav2 = $('#pos-list'),
    isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;//判断浏览器类型

$.jqtab = function(nav, main) {

    $(nav + ' li').click(function() {
        $(nav + ' li').removeClass('active');
        $(nav + ' li').find('a').removeClass('color');

        $(this).find('a').addClass('color');
        activeTab = $(this).find('a').attr('tab');
        $(main).hide();
        $(this).addClass('active');
        $('#' + activeTab).fadeIn();
        return false;
    });
};
$.jqtab('#nav', '.main');

$(function(){
    // if (!isIphone) {
    //     return;
    // }

    $('#wrapper').addClass('scroll-wrapper');
    myScroll = new IScroll('#wrapper', {
        probeType: 3,
        mouseWheel: true,
        click: true
    });


    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
    }, false);

    if (!isIphone) {
        return;
    }

    myScroll.on('scroll', function() {
        var sTop = -this.y;
        console.log(sTop)

        if (sTop < imgH) {
            if (!$nav1.hasClass('hide')) {
                $nav1.addClass('hide');
            }
            if (!$nav2.hasClass('hide')) {
                $nav2.addClass('hide');
            }  //滑动距离不到导航1
        } else if (sTop < imgH + nav1H + main1oH) {
            if ($nav1.hasClass('hide')) {
                $nav1.removeClass('hide');
            }
            if (!$nav2.hasClass('hide')) {
                $nav2.addClass('hide');
            }//滑动距离不到导航2

            if (sTop < imgH + main1H) {
                if (!$nav1.hasClass('fixed-top')) {
                    $nav1.addClass('fixed-top')
                        .removeClass('absolute')
                        .css({
                            transform: 'translate(0, ' + (- scH) + 

'px)'
                        });
                }
            } else if (sTop < imgH + nav1H + main1H) {
                if (!$nav1.hasClass('absolute')) {
                    $nav1.addClass('absolute')
                        .removeClass('fixed-top');
                }
                $nav1.css({
                        transform: 'translate(0, ' + (imgH + main1H - 

sTop  - scH) + 'px)'
                    });
            }
        } else {
            if (!$nav1.hasClass('hide')) {
                $nav1.addClass('hide');
            }
            if ($nav2.hasClass('hide')) {
                $nav2.removeClass('hide');
            }

            if (sTop < imgH + nav1H + main1oH + nav2H + main2oH) {
                  if (!$nav2.hasClass('fixed-top')) {
                    $nav2.addClass('fixed-top')
                        .removeClass('absolute')
                        .css({
                            transform: 'translate(0, ' + (- scH) + 

'px)'
                        });
                }
            } else {
                 if (!$nav2.hasClass('absolute')) {
                    $nav1.addClass('absolute')
                        .removeClass('fixed-top');
                }
                $nav2.css({
                        transform: 'translate(0, ' + (imgH + nav1H + 

main1oH + main2oH -sTop  - scH) + 'px)'
                    });
            }
        }
    });
})

        //window onload 后重新refresh iscroll
        window.onload = function() {
            myScroll && myScroll.refresh();
            imgH = $('#nav-top').outerHeight();
            nav1H = $('#nav').outerHeight();
            main1H = $('#nav-main').height();
            main1oH = $('#nav-main').outerHeight();
            nav2H = $('#list-nav').outerHeight();
            main2oH = $('#goods-container').outerHeight();
            scH = $('#scroller').outerHeight();
            console.log(imgH + main1H)
            console.log(imgH + nav1H + main1H)
        };