参考 中文文档 (yangtangjun.github.io)

代码实现

结构

<div id="fullPage">
    <div class="section"></div>
    <div class="section section2" id="my-scrollbar" data-scrollbar>
        <div class="main"></div>
        <div class="main2"></div>
        <div class="main3"></div>
    </div>
</div>

JS代码

$('#fullPage').fullpage({
    scrollingSpeed: 1600,
    anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
    easingcss3: 'cubic-bezier(0.42,0,0,0.99)',
    navigationPosition: 'right',
    responsiveWidth: 900,
    responsiveSlides: true,
    menu: "#menu",
});
var Scrollbar = window.Scrollbar;
Scrollbar.initAll()
var scrollbar = Scrollbar.get(document.querySelector('#my-scrollbar'))
scrollbar.addListener((status) => {
    window.pageYOffset = scrollbar.scrollTop
    var scroll =$('.section2')[0].scrollTop
    var scroll2 = scrollbar.scrollTop
    scroll = scroll2
    if(scroll==0){
        $('#fullPage').fullpage.setAllowScrolling(true)
    }else{
        $('#fullPage').fullpage.setAllowScrolling(false,'up');
        $('#fullPage').fullpage.setKeyboardScrolling(false, 'down, up');
    }
});

坚锋实现

// 初始化
AOS.init({
    easing: 'ease-out-back',
    disable: 'mobile',
    duration: 2000
});

// 平滑滚动条初始化
if ($('#my-scrollbar').length > 0) {
    var Scrollbar = window.Scrollbar;
    Scrollbar.initAll()
    var scrollbar = Scrollbar.get(document.querySelector('#my-scrollbar'))
    scrollbar.addListener((status) => {
        AOS.refresh();
        window.pageYOffset = scrollbar.scrollTop
        var scroll = window.pageYOffset
    });
}

// 首页全屏滚动
if ($('#fullPage').length > 0) {
    $('#fullPage').fullpage({
        scrollingSpeed: 1600,
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        easingcss3: 'cubic-bezier(0.42,0,0,0.99)',
        navigationPosition: 'right',
        responsiveWidth: 900,
        responsiveSlides: true,
        onLeave: function (section, origin, destination, direction) {
            // 当前屏幕在的位置
            // console.log(origin.index);
            if (origin.index >= 1) {
                $('.top-header').css('opacity','0')
                $('.top-header').css('pointer-events','none')
                $('.header').css('opacity','1')
                $('.header').css('pointer-events','unset')
             }else{
                $('.top-header').css('opacity','1')
                $('.top-header').css('pointer-events','unset')
                $('.header').css('opacity','0')
                $('.header').css('pointer-events','none')
             }
            setTimeout(function () {
                $(".count-number").each(function (t, e) {
                    let o = $(e),
                        _from = o.data('from'),
                        _to = o.data('to');
    
                    new CountUp(o, _from, _to, 1, 2).start();
                })
            }, 500);
        },
      });
}