Блог

Я новичок в JavaScript и в настоящее время разрабатываю веб-сайт с временной шкалой, чтобы постепенно отображать элементы и IntersectionObserver изменять панель навигации, когда она пересекается с определенным элементом ( .container ).

Я использую негатив rootMargin , и мне нужно настроить его -90% , но это работает только до -50% .

Кто-нибудь знает, в чем моя проблема?

Код, который я использую:

 function siteTimeLine() {
    let controller = new ScrollMagic.Controller();
    let timeline = new TimelineMax();
    
    timeline                                   
        .to('.rock', 3, {y: -300})              
        .to('.girl', 3, {y: -200}, '-=3')
        .fromTo('.bg1', {y: -50}, {y: 0, duration: 3}, '-=3')
        .to('.content', 3, {top: '0%'}, '-=3')
        .fromTo('.content-images', {opacity: 0}, {opacity: 1, duration: 2})
        .fromTo('.text', {opacity: 0}, {opacity: 1, duration: 2});
        
    let scene = new ScrollMagic.Scene({
        triggerElement: '.main-section',
        duration: '200%',
        triggerHook: 0
    })
        .setTween(timeline)
        .setPin('section')
        .addTo(controller);
}


function navIntersectionObserver() {
    const navbar = document.querySelector('.nav-list');
    const initSection = document.querySelector('.content');
    const initSectionOpts = {
        //root: document.getElementsByClassName("body"),
        rootMargin: '-50%'
    };

    const initSectionObs = new IntersectionObserver(function(entries, initSectionObs) {
        entries.forEach( entry => {
            if(entry.isIntersecting) {
                console.log('Intersection!');
                navbar.classList.add('nav-scrolled');

            } else {
                navbar.classList.remove('nav-scrolled');
            }
        })
    }, initSectionOpts);

    initSectionObs.observe(initSection);
}


function website() {
    navIntersectionObserver();
    siteTimeLine();
}

website();