https://www.hkbu.edu.hk/content/dam/hongkongbaptistuniversity/hkbu-assets/homepage/faculty-0111/js/main.js

1$(function () {
2    // "use strict";
3    var $winWidth = $(window).width();
4    var aspectRatio = window.matchMedia('(max-aspect-ratio: 1/1)').matches;
5    var isMobFaculty = $winWidth < 1200 || aspectRatio;
6    var controller = new ScrollMagic.Controller();
7    if(isMobFaculty){
8        $(window).on("scroll touchmove", function() {
9                let scrollAfter = $(this).scrollTop(),
10                    zonePos = $('.gs-area02').position().top;
11                let bg = $('.js-bg-img'),
12                    zoneH = $('.gs-area02').outerHeight(),
13                    windowH = $(window).outerHeight();
14                // 下滾進入區域
15                if(scrollAfter >= zonePos) {
16                    bg.css('top', (scrollAfter - zonePos))
17                    // 下滾超過
18                    if(scrollAfter >= (zoneH + zonePos - windowH)) {
19                        bg.css('top', (zoneH - windowH))
20                    }
21                };
22            }).scroll();
23    } else {
24        $('.gs-area02 .js-bg-img').after($('.gs-area02 .gs-col-3'));
25        $('.gs-area02 .gs-col-3').css('opacity','1');
26        var timeLineSec = new TimelineMax().addLabel('t1').add(TweenMax.to('.gs-content-height', 1, { transform: 'translate(-50%,0)' }, 't1'));
27        new ScrollMagic.Scene({
28            triggerHook: 0,
29            triggerElement: '#gsArea02',
30            duration: '150%',
31        })
32            .setPin('#gsArea02')
33            .setTween(timeLineSec)
34            .addTo(controller);
35    }
36    $(".gs-area02").parents().parents().parents().parents().removeClass('container');
37});