Как сделать меню, которое фиксируется с анимацией. Меню должно прятаться и выезжать относительно скролла?

Question

[v_katunin]

Нужна помощь в реализации такого меню, как здесь. https://t.vipkid.com.cn/

В данный момент использовал такой скрипт:

// sticky header

    $('.top-menu').removeClass('sticky');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 60) {
            $('.top-menu').addClass('sticky');
            $('.main-logo').attr('src', 'img/logo-scroll.png');
        } else {
            $('.top-menu').removeClass('sticky');
            $('.main-logo').attr('src', 'img/logo.png');
        };
    });

но оно просто фиксирует его при определенном скроле. а нужно, чтобы плавно появлялось относительно прокрутки. и полностью появилось только после 100vh (на втором блоке)

Comments

[Uno di Palermo]

а зачем в начале это?

$('.top-menu').removeClass('sticky');

Answer 1

[Uno di Palermo]

1. кажется этот скрипт отвечает за навбар
fe-static.vipkid.com.cn/js/home/common-812f47f318.js

2. прокрути вниз, пока не появится белое меню - вызови на нем "посмотреть код" - там два div'a:
a) с классом "header-wrapper j-header-wrapper header-wrapper-transparent" (он существует до появления меню)
b) и "header-wrapper j-header-wrapper" (создается при появлении меню белого)

при скроллинге будут менять opacity. тут вся сила