wisdomcity-website/static/js/main.js

(function ($) {
    // 导航
    $('.touch').on('click', function () {
        $('.nav').width(window.innerWidth).toggle();
    });

    var $timber = $('.timber'),
        left;
    left = $timber.css('left');
    $('.nav li').hover(function () {
        var index = $(this).index('.nav li');

        switch (index) {
            case 0:
                $timber.css('left', 58);
                break;
            case 1:
                $timber.css('left', 191);
                break;
            case 2:
                $timber.css('left', 306);
                break;
            case 3:
                $timber.css('left', 415);
                break;
        }

    }, function () {
        $timber.css('left', left);
    });


    // animate
    var h = window.innerHeight,
        w,
    // .header
        $header = $('.header'),
        headerH = $header.outerHeight(),
    // #pt-img
        $ptImg = $('#pt_img'),
        ptImgTop = $ptImg.offset().top,
        ptImgH = $ptImg.outerHeight(),
    // #zs
        $zs = $('#zs'),
        zsImgTop = $zs.offset().top,
        zsImgH = $zs.outerHeight(),
    // #about_l
        $aboutL = $('#about_l'),
        abImgTop = $aboutL.offset().top,
        abImgH = $aboutL.outerHeight();

    $(window).resize(function () {
        w = window.innerWidth;
        if (w > 800) {
            $('.nav').show().css('width', 'auto');
        } else {
            $('.nav').hide().width(w);
        }
    }).
        on('scroll', function () {
            var scrollTop = $(window).scrollTop();

            if(headerH < scrollTop && w > 800){
                $header.addClass('fixed');
            } else{
                $header.removeClass('fixed');
            }

            if (ptImgTop - h + ptImgH < scrollTop && ptImgTop > scrollTop) {
                $ptImg.addClass('animated pulse');
            }

            if (zsImgTop - h + zsImgH < scrollTop && zsImgTop > scrollTop) {
                $('#qrcode_1').addClass('animated fadeInLeft');
                $('#qrcode_2').addClass('animated fadeInRight');
            }

            if (abImgTop - h + abImgH < scrollTop && abImgTop > scrollTop) {
                $aboutL.addClass('animated flipInY');
            }
        });
})(jQuery);